/* Hyperfocus design tokens — verbatim from Noa's brandbook (hyperfocus_brandbook.html).
   Single source of truth for color/space/type/motion. Do not hardcode values elsewhere. */
:root {
  color-scheme: dark;
  /* accent (iris) — the ONE loud element per view: action / selected / focus */
  --accent: #7C6CF0;
  --accent-hover: #8E80F4;
  --accent-pressed: #6A59E0;
  --accent-tint: rgba(124,108,240,0.12);
  --accent-tint-strong: rgba(124,108,240,0.22);
  --accent-solid: #6A59E0;                 /* accent as SOLID FILL under a white label (--accent fails: #FFF on it = 3.99:1) */
  --accent-text: #9C90F5;                  /* iris as small text on dark — completes --success-text / --danger-text */

  /* surface ladder — cool slate, near-monochrome */
  --bg-canvas: #0D0F14;
  --bg-base: #15181F;
  --bg-surface: #1C2027;
  --bg-elevated: #242932;
  --bg-pressed: #2E343E;
  --bg-input: #181B21;
  --bg-overlay: rgba(0,0,0,0.66);

  --text-primary: #E9EAEE;
  --text-secondary: #9AA0AC;
  --text-tertiary: #646A77;
  --text-inverse: #0D0F14;

  /* category hues — tags + analytics ONLY, never surfaces or CTAs */
  --cat-deep: #7C6CF0;
  --cat-ops: #3DA6E0;
  --cat-growth: #34C77B;
  --cat-creative: #E0883D;
  --cat-personal: #C76CD0;
  --cat-bug: #E0556B;

  --success: #2EBE7E;
  --success-text: var(--success);          /* green as TEXT (dark: same hue clears AA) */
  --danger-text: #F08A99;                  /* red as TEXT — 6.12:1 on --bg-elevated */
  --success-tint: rgba(46,190,126,0.12);
  --danger: #E0556B;
  --danger-tint: rgba(224,85,107,0.12);
  --warning: #F0B429;
  --warning-tint: rgba(240,180,41,0.14);

  /* timer/budget states — rings/dots/hairlines only */
  --timer-running: #2EBE7E;
  --timer-warn: #F0B429;
  --timer-over: #E0556B;

  --badge-ring: rgba(224,85,107,0.55);   /* unread-badge pulse ring (danger + alpha) */

  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;

  --elev-1: 0 1px 2px rgba(0,0,0,0.30);
  --elev-2: 0 4px 12px rgba(0,0,0,0.40);
  --elev-3: 0 8px 24px rgba(0,0,0,0.50);

  --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* drawer: left-edge shadow so the panel floats over the board */
  --elev-drawer: -16px 0 48px rgba(0,0,0,0.55);
  --drawer-w: 720px;   /* ~42% of 1440 viewport, matches Asana */
  --row-h: 44px;       /* label:value row = min touch target */
  --label-w: 132px;    /* fixed label column in the drawer */

  /* type — Inter body, JetBrains Mono for all numerics/time (tabular) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-micro: 11px; --fs-small: 12.5px; --fs-body: 13.5px; --fs-lg: 15px; --fs-title: 19px;
}

/* ============================================================ LIGHT THEME
   Noa spec 2026-06-08. Token swap on <html data-theme="light">; component-level
   overrides that can't come from tokens live in app.css / v2.css. */
[data-theme="light"] {
  color-scheme: light;

  /* accent (iris stays; hover/pressed darken instead of lighten) */
  --accent: #7C6CF0;
  --accent-hover: #6A59E0;
  --accent-pressed: #5A49D0;
  --accent-tint: rgba(124,108,240,0.10);
  --accent-tint-strong: rgba(124,108,240,0.18);
  --accent-solid: #6A59E0;                 /* accent as SOLID FILL under a white label (--accent fails: #FFF on it = 3.99:1) */
  --accent-text: #5145C4;                  /* iris as small text on light */

  /* surface ladder — cool blue-grey, darker = more elevated */
  --bg-canvas: #F5F6F8;
  --bg-base: #EDEEF2;
  --bg-surface: #E4E6EB;
  --bg-elevated: #DBDDE4;
  --bg-pressed: #CACDD6;
  --bg-input: #EDEEF2;
  --bg-overlay: rgba(30,34,50,0.50);

  --text-primary: #14161C;
  --text-secondary: #4A4F5E;
  --text-tertiary: #7A8094;
  --text-inverse: #F5F6F8;

  /* category hues — only the two that failed contrast on light tints change */
  --cat-growth: #1E9E5C;
  --cat-creative: #B8601A;
  --cat-bug: #C03050;

  --success: #1A9C65;
  --success-text: #0B6B44;                 /* deep green: AA for small text on white + success-tint */
  --danger-text: #A0203C;                  /* deep rose: AA for small text on light surfaces */
  --success-tint: rgba(26,156,101,0.12);
  --danger: #C03050;
  --danger-tint: rgba(192,48,80,0.10);
  --warning: #C47D00;
  --warning-tint: rgba(196,125,0,0.12);

  --timer-running: #1A9C65;
  --timer-warn: #C47D00;
  --timer-over: #C03050;
  --badge-ring: rgba(192,48,80,0.45);

  --border-subtle: rgba(30,34,50,0.08);
  --border-default: rgba(30,34,50,0.14);
  --border-strong: rgba(30,34,50,0.24);

  /* shadows use a cool blue-grey tint, not black — black looks pasted on white */
  --elev-1: 0 1px 3px rgba(60,65,85,0.10), 0 1px 2px rgba(60,65,85,0.06);
  --elev-2: 0 4px 12px rgba(60,65,85,0.12), 0 2px 4px rgba(60,65,85,0.08);
  --elev-3: 0 8px 24px rgba(60,65,85,0.14), 0 3px 8px rgba(60,65,85,0.08);
  --elev-drawer: -8px 0 32px rgba(60,65,85,0.14), -2px 0 8px rgba(60,65,85,0.06);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
button { font-family: inherit; cursor: pointer; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-pressed); border-radius: var(--radius-full); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}