/**
 * Design tokens — single source of truth for colors, typography, spacing.
 * Normalize all styles to use these; avoids hard-coded values and keeps theme consistent.
 */

:root {
  /* ---- Color: semantic ---- */
  --color-accent: #ff5e19;
  --color-accent-hover: #ff7a3d;
  --color-link: #0084ff;
  --color-link-blog: #00c3ff;
  --color-error: #c66;
  --color-error-strong: #ff3333;

  /* Dark UI (blog overlay, panels on dark bg) */
  --color-bg-overlay: rgba(0, 0, 0, 0.6);
  --color-bg-surface-dark: rgba(20, 20, 20, 0.95);
  --color-bg-elevated: rgba(255, 255, 255, 0.05);
  --color-bg-card: rgba(255, 255, 255, 0.03);
  --color-bg-card-hover: rgba(255, 255, 255, 0.08);

  /* Borders */
  --color-border: #444;
  --color-border-muted: #555;
  --color-border-subtle: #666;

  /* Text on dark */
  --color-text-primary: #fff;
  --color-text-secondary: #eee;
  --color-text-muted: #999;
  --color-text-muted-2: #bbb;
  --color-text-muted-3: #666;
  --color-text-muted-4: #888;

  /* Text on light / neutral surfaces */
  --color-text-on-light: #323232;
  --color-text-on-light-2: #333333;

  /* Surfaces (light panels) */
  --color-surface-light: #fff;
  --color-surface-light-2: #fdfdfb;
  --color-surface-light-3: #e9e9e9;
  --color-surface-light-4: #ebeceb;

  /* Page / standalone (e.g. 404) */
  --color-bg-page: #0a0a0a;
  --color-text-on-dark: #f5f5f5;

  /* Code / content (blog markdown) */
  --color-bg-code: #333;
  --color-bg-pre: #222;
  --color-bg-spoiler: #313131;
  --color-text-quote: #aaa;

  /* Print */
  --color-print-text: #111;
  --color-print-link: #0066cc;

  /* Decorative / one-off (keep for compatibility) */
  --color-bar: #888;
  --color-shadow: rgba(0, 0, 0, 0.8);
  --color-shadow-soft: rgba(0, 0, 0, 0.5);

  /* ---- Typography ---- */
  --font-sans: "Noto Sans SC", sans-serif;
  --font-serif: "Noto Serif SC", serif;
  --font-mono: monospace;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
}