/* ─────────────────────────────────────────────────────────────────────
 * design tokens — single source of truth for palette / type / spacing
 * change here → propagates everywhere via CSS custom properties.
 *
 * naming convention: --<category>-<role>[-<variant>]
 *   color-brand-sky, color-text-primary, color-surface-0, etc.
 *
 * to swap the brand palette (e.g. blue → green) edit ONLY this file.
 * ───────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
       url('/fonts/InterVariable-Italic.woff2') format('woff2');
}

:root {
  /* ─── Color — Brand ──────────────────────────────────────────── */
  --color-brand-sky:        #0ea5e9;   /* primary accent */
  --color-brand-sky-hover:  #38bdf8;
  --color-brand-deep:       #2563eb;   /* gradient companion */
  --color-brand-cyan:       #22d3ee;   /* secondary diagnostic */

  /* alpha variants (sky) — derived semantics */
  --color-brand-soft:       rgba(14, 165, 233, 0.10);
  --color-brand-glow:       rgba(14, 165, 233, 0.28);
  --color-brand-edge:       rgba(14, 165, 233, 0.30);
  --color-brand-edge-2:     rgba(14, 165, 233, 0.40);

  /* ─── Color — Surfaces (dark theme) ───────────────────────────── */
  --color-surface-0:        #0b0b0d;   /* canvas */
  --color-surface-1:        #131318;   /* raised */
  --color-surface-2:        #1a1a20;   /* highest */
  --color-surface-glass:    rgba(11, 11, 13, 0.72);

  /* ─── Color — Text ───────────────────────────────────────────── */
  --color-text-primary:     #f5f5f7;
  --color-text-secondary:   #a8a8b0;
  --color-text-tertiary:    #6b6b75;
  --color-text-disabled:    #4a4a52;
  --color-text-on-accent:   var(--color-surface-0); /* dark text on bright button */

  /* ─── Color — Border ─────────────────────────────────────────── */
  --color-border-faint:     #1f1f26;
  --color-border-default:   #2a2a33;
  --color-border-strong:    #3a3a45;
  --color-border-focus:     var(--color-brand-sky);

  /* ─── Color — Semantic ───────────────────────────────────────── */
  --color-success:          #34d399;
  --color-error:            #f87171;
  --color-error-bg:         rgba(248, 113, 113, 0.08);
  --color-error-edge:       rgba(248, 113, 113, 0.25);
  --color-warning:          #fbbf24;

  /* ─── Spacing — 4px base scale ───────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── Typography — sizes ─────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   17px;
  --text-xl:   19px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;

  --leading-tight:  1.1;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.015em;
  --tracking-normal: -0.005em;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.04em;

  /* ─── Radius ─────────────────────────────────────────────────── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill: 9999px;

  /* ─── Shadow ─────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 0 1px var(--color-brand-sky), 0 0 16px var(--color-brand-glow);

  /* ─── Motion ─────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-instant: 100ms;
  --duration-fast:    180ms;
  --duration-normal:  280ms;
  --duration-slow:    450ms;

  /* ─── Z-index scale ──────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   5000;
  --z-toast:   9999;

  /* ─── Layout caps ────────────────────────────────────────────── */
  --layout-max-prose:   760px;
  --layout-max-content: 1100px;
  --layout-max-chat:    920px;

  /* ─── Backwards-compat aliases (legacy names — gradually retire) ─ */
  --bg-0: var(--color-surface-0);
  --bg-1: var(--color-surface-1);
  --bg-2: var(--color-surface-2);
  --bg-glass: var(--color-surface-glass);
  --border-faint: var(--color-border-faint);
  --border-default: var(--color-border-default);
  --border-strong: var(--color-border-strong);
  --border-focus: var(--color-border-focus);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --text-disabled: var(--color-text-disabled);
  --accent: var(--color-brand-sky);
  --accent-hover: var(--color-brand-sky-hover);
  --accent-deep: var(--color-brand-deep);
  --accent-soft: var(--color-brand-soft);
  --accent-glow: var(--color-brand-glow);
  --cyan: var(--color-brand-cyan);
  --cyan-soft: rgba(34, 211, 238, 0.12);
  --success: var(--color-success);
  --error: var(--color-error);
  --error-bg: var(--color-error-bg);
}

/* Respect reduced-motion preference (Lighthouse A11y) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast:    1ms;
    --duration-normal:  1ms;
    --duration-slow:    1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}