/* =====================================================================
   Daily Brief design tokens
   Layer 1: primitives  (raw values, never used by components directly)
   Layer 2: semantic    (roles: surfaces, text, accents per item type, status)
   Layer 3: component   (what components.css reads)
   Each direction is a [data-theme] override of layers 2 and 3.
   Directions: terminal (A), synthwave (B), mission (C).
   Breakpoints (media queries can't read variables; keep in sync):
     phone < 600px, tablet 600-1023px, desktop >= 1024px
   ===================================================================== */

:root {
  /* ---------- 1. Primitives ---------- */
  --p-black: #000000;
  --p-ink-950: #050508;
  --p-ink-900: #0b0b11;
  --p-ink-850: #111119;
  --p-ink-800: #181823;
  --p-ink-700: #252533;
  --p-ink-600: #383849;
  --p-gray-500: #8f8ca3;
  --p-gray-400: #a8a5ba;
  --p-gray-300: #c4c2d2;
  --p-gray-100: #edecf4;
  --p-white: #ffffff;

  --p-violet-950: #0d0a18;
  --p-violet-900: #140f24;
  --p-violet-800: #221a3a;
  --p-violet-700: #33285a;

  --p-pink-400: #ff63b1;
  --p-pink-300: #ff8fc8;
  --p-pink-950: #2a0c1c;
  --p-cyan-400: #42e2ee;
  --p-cyan-950: #062126;
  --p-purple-400: #b896ff;
  --p-purple-950: #1c1433;
  --p-green-400: #5ef0a6;
  --p-green-950: #082517;
  --p-amber-400: #ffc861;
  --p-amber-950: #2a1f07;
  --p-red-400: #ff6f8e;
  --p-red-950: #2d0c15;

  --p-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --p-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --p-space-1: 4px;  --p-space-2: 8px;  --p-space-3: 12px; --p-space-4: 16px;
  --p-space-5: 20px; --p-space-6: 24px; --p-space-8: 32px; --p-space-10: 40px; --p-space-12: 48px;

  --p-radius-0: 0; --p-radius-2: 2px; --p-radius-6: 6px; --p-radius-10: 10px; --p-radius-14: 14px; --p-radius-pill: 999px;

  --p-dur-0: 0ms; --p-dur-1: 120ms; --p-dur-2: 200ms; --p-dur-3: 320ms;
  --p-ease-out: cubic-bezier(.2, .7, .2, 1);

  /* ---------- 2. Semantic roles (defaults = direction A) ---------- */
  --color-bg: var(--p-black);
  --color-surface: var(--p-black);
  --color-surface-raised: var(--p-ink-900);
  --color-border: var(--p-ink-700);
  --color-border-strong: var(--p-ink-600);
  --color-text: var(--p-gray-100);
  --color-text-muted: var(--p-gray-400);
  --color-text-on-accent: var(--p-black);
  --color-link: var(--p-cyan-400);
  --color-focus: var(--p-cyan-400);

  /* one accent per item type */
  --role-ask: var(--p-pink-400);
  --role-todo: var(--p-cyan-400);
  --role-flight: var(--p-purple-400);
  --role-pr: var(--p-green-400);
  --role-alert: var(--p-amber-400);
  --role-streak: var(--p-green-400);

  /* status */
  --status-ok: var(--p-green-400);      --status-ok-bg: var(--p-green-950);
  --status-warn: var(--p-amber-400);    --status-warn-bg: var(--p-amber-950);
  --status-danger: var(--p-red-400);    --status-danger-bg: var(--p-red-950);
  --status-info: var(--p-cyan-400);     --status-info-bg: var(--p-cyan-950);
  --status-neutral: var(--p-gray-300);  --status-neutral-bg: var(--p-ink-800);

  /* type */
  --font-body: var(--p-font-sans);
  --font-display: var(--p-font-mono);
  --font-label: var(--p-font-mono);
  --font-num: var(--p-font-mono);
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 30px; --text-3xl: 40px;
  --leading-tight: 1.25; --leading-body: 1.5;
  --tracking-label: .08em;
  --weight-regular: 400; --weight-medium: 500; --weight-bold: 650;

  /* space, radius, motion */
  --space-1: var(--p-space-1); --space-2: var(--p-space-2); --space-3: var(--p-space-3); --space-4: var(--p-space-4);
  --space-5: var(--p-space-5); --space-6: var(--p-space-6); --space-8: var(--p-space-8); --space-10: var(--p-space-10); --space-12: var(--p-space-12);
  --radius-sm: var(--p-radius-0); --radius-md: var(--p-radius-0); --radius-lg: var(--p-radius-0);
  --dur-fast: var(--p-dur-1); --dur-base: var(--p-dur-2); --ease: var(--p-ease-out);

  /* ---------- 3. Component tokens ---------- */
  --layout-max: 920px;
  --layout-gutter: var(--space-6);
  --touch-min: 44px;

  --topbar-bg: var(--p-black);
  --topbar-border: var(--color-border);
  --topbar-horizon: none;
  --topbar-height: 64px;

  --panel-bg: var(--color-surface);
  --panel-border: var(--color-border);
  --panel-radius: var(--radius-lg);
  --panel-pad: var(--space-6) 0;
  --panel-accent-width: 0;
  --panel-rule: 1px solid var(--color-border);
  --panel-hover-shadow: none;
  --panel-title-size: var(--text-sm);
  --panel-title-transform: uppercase;

  --item-pad-y: var(--space-3);
  --item-gap: var(--space-4);
  --item-title-size: var(--text-md);
  --item-border: 1px solid var(--color-border);

  --tnum-bg: transparent;
  --tnum-border: 1px solid currentColor;
  --tnum-radius: var(--radius-sm);

  --badge-radius: var(--p-radius-2);
  --kpi-bg: transparent;
  --kpi-border: 1px solid var(--color-border);
  --kpi-value-size: var(--text-2xl);

  --btn-height: 48px;
  --btn-radius: var(--radius-md);
  --btn-primary-bg: var(--p-cyan-400);
  --btn-primary-text: var(--p-black);
  --btn-primary-bg-hover: var(--p-gray-100);
  --btn-ghost-border: var(--color-border-strong);

  --input-height: 48px;
  --input-bg: var(--p-ink-900);
  --input-border: var(--p-ink-600);
  --input-border-focus: var(--color-focus);
  --input-radius: var(--radius-sm);

  --table-head-text: var(--color-text-muted);
  --table-row-border: 1px solid var(--color-border);

  --tabbar-bg: var(--p-ink-950);
  --tabbar-active: var(--p-cyan-400);

  --auth-card-bg: var(--p-black);
  --auth-card-border: 1px solid var(--color-border);
  --auth-card-radius: var(--radius-lg);
}

/* ===================== B. Synthwave (Outrun, softened) ===================== */
[data-theme="synthwave"] {
  --color-bg: var(--p-ink-950);
  --color-surface: var(--p-violet-950);
  --color-surface-raised: var(--p-violet-900);
  --color-border: var(--p-violet-800);
  --color-border-strong: var(--p-violet-700);
  --color-text-muted: var(--p-gray-400);
  --color-link: var(--p-pink-300);
  --color-focus: var(--p-pink-300);

  --font-display: var(--p-font-sans);
  --font-label: var(--p-font-sans);
  --tracking-label: .14em;
  --radius-sm: var(--p-radius-6); --radius-md: var(--p-radius-10); --radius-lg: var(--p-radius-14);

  --layout-max: 1240px;
  --topbar-bg: var(--p-ink-950);
  --topbar-border: var(--p-violet-800);
  --topbar-horizon: linear-gradient(180deg, rgba(5,5,8,0) 0%, rgba(184,150,255,.10) 45%, rgba(255,99,177,.22) 100%);
  --topbar-height: 72px;

  --panel-pad: var(--space-5);
  --panel-accent-width: 2px;
  --panel-rule: none;
  --panel-hover-shadow: 0 0 0 1px var(--panel-accent), 0 0 18px -6px var(--panel-accent);

  --tnum-bg: var(--p-violet-900);
  --tnum-border: 1px solid var(--p-violet-700);
  --badge-radius: var(--p-radius-pill);
  --kpi-bg: var(--p-violet-950);
  --kpi-border: 1px solid var(--p-violet-800);

  --btn-primary-bg: var(--p-pink-400);
  --btn-primary-text: #0b0710;
  --btn-primary-bg-hover: var(--p-pink-300);
  --input-bg: var(--p-ink-950);
  --input-border: var(--p-violet-700);
  --tabbar-bg: var(--p-violet-950);
  --tabbar-active: var(--p-pink-300);
  --auth-card-bg: var(--p-violet-950);
}

/* ===================== C. Mission control (neon = status only) ===================== */
[data-theme="mission"] {
  --color-bg: var(--p-black);
  --color-surface: var(--p-ink-900);
  --color-surface-raised: var(--p-ink-850);
  --color-border: var(--p-ink-700);
  --color-text-muted: var(--p-gray-400);
  --color-link: var(--p-gray-100);
  --color-focus: var(--p-cyan-400);

  /* item types carry no color here; only status does */
  --role-ask: var(--p-gray-300);
  --role-todo: var(--p-gray-300);
  --role-flight: var(--p-gray-300);
  --role-pr: var(--p-gray-300);
  --role-alert: var(--p-gray-300);
  --role-streak: var(--p-gray-300);

  --font-display: var(--p-font-sans);
  --text-md: 15px; --text-sm: 13px; --text-xs: 12px; --text-2xl: 26px;
  --tracking-label: .1em;
  --radius-sm: var(--p-radius-2); --radius-md: var(--p-radius-2); --radius-lg: var(--p-radius-2);

  --layout-max: 1600px;
  --layout-gutter: var(--space-4);
  --topbar-height: 52px;
  --topbar-bg: var(--p-ink-950);

  --panel-pad: var(--space-4);
  --panel-title-size: var(--text-xs);
  --item-pad-y: var(--space-2);
  --item-gap: var(--space-3);
  --item-title-size: var(--text-sm);
  --tnum-border: 1px solid var(--p-ink-600);
  --kpi-bg: var(--p-ink-900);
  --kpi-value-size: var(--text-2xl);

  --btn-height: 44px;
  --btn-primary-bg: var(--p-gray-100);
  --btn-primary-text: var(--p-black);
  --btn-primary-bg-hover: var(--p-white);
  --input-height: 44px;
  --tabbar-active: var(--p-gray-100);
  --auth-card-bg: var(--p-ink-900);
}

@media (prefers-reduced-motion: reduce) {
  :root, [data-theme] { --dur-fast: 0ms; --dur-base: 0ms; }
}