/* 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 {
  /* 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);

  /* 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-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;

  --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;
}

*, *::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; }
}