/* ================================================================
   TaskNest — Design Tokens  v2.0
   Single source of truth for all CSS custom properties.
   All CSS files should @import this file before any rules.

   DYNAMIC TOKENS: marked [D] — overridden at runtime by theme-engine.js.
   STATIC TOKENS:  marked [S] — never overridden; stable across themes.
   ================================================================ */

:root {
  /* ── Brand (primary) [D] ──────────────────────────────────────── */
  --primary:        #4f46e5;
  --primary-hover:  #4338ca;
  --primary-mid:    #6366f1;
  --primary-light:  #eef2ff;
  --primary-ring:   rgba(79, 70, 229, 0.18);
  --primary-shadow: rgba(79, 70, 229, 0.28);
  --primary-200:    #c7d2fe;
  --primary-300:    #a5b4fc;
  --primary-800:    #3730a3;

  /* ── Accent [D] ───────────────────────────────────────────────── */
  --accent:       #0277b6;
  --accent-hover: #036499;
  --accent-light: #e0f2fe;

  /* ── Semantic colors [S] ──────────────────────────────────────── */
  --color-success:       #15803d;
  --color-success-light: #dcfce7;
  --color-warning:       #b45309;
  --color-warning-light: #fef9c3;
  --color-danger:        #dc2626;
  --color-danger-light:  #fee2e2;
  --color-info:          #2563eb;
  --color-info-light:    #eff6ff;

  /* ── Backgrounds [D] ──────────────────────────────────────────── */
  --bg-base:    #f4f6fa;
  --bg-card:    #ffffff;
  --bg-sidebar: #ffffff;
  --bg-subtle:  #f8fafc;   /* nested / hover surface — sits just off the card */

  /* ── Brand [D] ────────────────────────────────────────────────── */
  --logo-ink: #1e2a38;   /* navy parts of the logo mark + the "Task" wordmark */
  --row-active-bg: #f8faff;   /* highlighted/active list-row bg (e.g. dashboard project rows) */

  /* ── Text [D] ─────────────────────────────────────────────────── */
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-tertiary:  #64748b;   /* tertiary text — between secondary and muted */
  /* a11y: bumped from #677284 (4.85:1 on white, 4.66:1 on bg-subtle) to
     #5a6573 (5.85:1 / 5.62:1) — gives comfortable AA margin so 200% zoom
     and dim displays still clear the 4.5:1 line. WCAG 2.1 SC 1.4.3 (AA). */
  --text-muted:     #5a6573;

  /* ── Borders [S] ──────────────────────────────────────────────── */
  --border:     #e2e8f0;
  --border-mid: #cbd5e1;

  /* ── Shadows [D] ──────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);

  /* ── Layout [D] ───────────────────────────────────────────────── */
  --sidebar-w: 248px;
  --header-h:  56px;

  /* ── Border radius [D] ────────────────────────────────────────── */
  --r-xs: 3px;
  --r-sm: 6px;
  --r:    8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;

  /* ── Spacing scale [D] ────────────────────────────────────────── */
  /* Legacy 6-step scale — kept because ~200+ rules reference --sp-*.
     Don't kill these without a sweep; values are bytecode-stable to
     prevent visual regressions. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* Canonical 5-step scale (2026-06-03 design-system pass) — Linear /
     Asana / Notion all use a multiples-of-4 / 8 ladder with no
     intermediate "12 / 20" rungs. New rules should prefer --space-*;
     legacy rules should migrate as they're touched. The token's
     value is the contract; comments call out the SaaS analogue.
       --space-1 = 4px    micro gap inside chips, icon ↔ text
       --space-2 = 8px    tight grid (button padding, list rows)
       --space-3 = 16px   default card padding, section gaps
       --space-4 = 24px   modal padding, page-section margins
       --space-5 = 32px   page-level padding, big hero spacing  */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* Card system: minimum interior padding for any "card" surface
     (.card, .dash-widget, .ba-card, .kpi-card, etc.). Components
     should pull from this instead of hardcoding 16px so a future
     density-mode flip is a one-token change. */
  --card-pad:        var(--space-3);   /* 16px — REQUIRED minimum */
  --card-pad-large:  var(--space-4);   /* 24px — modal-grade */
  --card-radius:     var(--r-md);      /* 10px — default card radius */

  /* ── Typography [D] ───────────────────────────────────────────── */
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-xs:   11px;
  --font-sm:   12px;
  --font-md:   13px;
  --font-base: 14px;
  --font-lg:   16px;
  --font-xl:   20px;

  /* ── Motion / transitions [D] ─────────────────────────────────── */
  --transition:      0.14s ease;
  --transition-fast: 0.1s ease;
  --transition-slow: 0.25s ease;

  /* ── Status palette [S] ───────────────────────────────────────── */
  --s-todo-bg:  #f1f5f9; --s-todo-fg:  #475569;
  --s-prog-bg:  #fef9c3; --s-prog-fg:  #854d0e;
  --s-done-bg:  #dcfce7; --s-done-fg:  #166534;
  --s-block-bg: #fee2e2; --s-block-fg: #991b1b;
  --s-over-bg:  #fff1f2; --s-over-fg:  #be123c;

  /* ── Priority palette [S] ─────────────────────────────────────── */
  --p-high-bg: #fee2e2; --p-high-fg: #b91c1c;
  --p-med-bg:  #fef3c7; --p-med-fg:  #92400e;
  --p-low-bg:  #dcfce7; --p-low-fg:  #15803d;

  /* ── Z-index scale [S] ────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Component variant flags [D] ──────────────────────────────── */
  /* Set by ThemeEngine; consumed via body[data-card-style] selectors  */
  --tn-card-style:    elevated;
  --tn-sidebar-style: standard;
}

/* ── Dark mode overrides ─────────────────────────────────────────
   Applied when <html data-theme="dark"> is set by the theme toggle.
   Overrides dynamic tokens (surfaces, text, borders, shadows, status
   and priority palettes). Static semantic --color-* values are kept.
   ─────────────────────────────────────────────────────────────── */
[data-theme='dark'] {
  color-scheme: dark;

  --primary:        #818cf8;
  --primary-hover:  #6366f1;
  --primary-mid:    #6366f1;
  --primary-light:  #1e1b4b;
  --primary-ring:   rgba(129, 140, 248, 0.22);
  --primary-shadow: rgba(129, 140, 248, 0.30);
  --primary-200:    #3730a3;
  --primary-300:    #4338ca;
  --primary-800:    #c7d2fe;

  --bg-base:    #0f172a;
  --bg-card:    #1e293b;
  --bg-sidebar: #1e293b;
  --bg-subtle:  #273344;

  --logo-ink: #e8eef5;   /* navy → light ink so the logo mark stays legible on dark */
  --row-active-bg: rgba(255,255,255,0.06);   /* active list-row highlight on dark surfaces */

  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;   /* distinct from tertiary — ~8.5:1 on dark card */
  --text-tertiary:  #94a3b8;   /* ~7:1 on dark card */
  --text-muted:     #7c8ea3;   /* ~5:1 on dark card; still passes 4.5:1 */

  --border:     #334155;
  --border-mid: #475569;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.50);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.60);

  --s-todo-bg:  #1e293b; --s-todo-fg:  #94a3b8;
  --s-prog-bg:  #2d2006; --s-prog-fg:  #fbbf24;
  --s-done-bg:  #052e16; --s-done-fg:  #4ade80;
  --s-block-bg: #2d0b0b; --s-block-fg: #f87171;
  --s-over-bg:  #2d0b17; --s-over-fg:  #fb7185;

  --p-high-bg: #2d0b0b; --p-high-fg: #f87171;
  --p-med-bg:  #2d1b02; --p-med-fg:  #fbbf24;
  --p-low-bg:  #052e16; --p-low-fg:  #4ade80;
}

/* ── Component variant rules ─────────────────────────────────────
   Applied when body[data-card-style] is set by theme-engine.js.
   These provide safe, structured visual variants — no inline styles.
   ─────────────────────────────────────────────────────────────── */

/* Card: minimal */
body[data-card-style='minimal'] .card,
body[data-card-style='minimal'] [class*='card'] {
  box-shadow: none;
  border: 1px solid var(--border);
}

/* Card: bordered */
body[data-card-style='bordered'] .card,
body[data-card-style='bordered'] [class*='card'] {
  box-shadow: none;
  border: 1.5px solid var(--border-mid);
}

/* Card: elevated (default) */
body[data-card-style='elevated'] .card,
body[data-card-style='elevated'] [class*='card'] {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* Card: premium */
body[data-card-style='premium'] .card,
body[data-card-style='premium'] [class*='card'] {
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(var(--primary-rgb, 79 70 229) / 0.12);
}

/* ── Density modifier ────────────────────────────────────────────
   Adjusts component padding when density changes.
   ─────────────────────────────────────────────────────────────── */
body[data-density='compact'] {
  --component-py: var(--sp-1);
  --component-px: var(--sp-2);
}
body[data-density='comfortable'] {
  --component-py: var(--sp-2);
  --component-px: var(--sp-3);
}
body[data-density='cozy'] {
  --component-py: var(--sp-3);
  --component-px: var(--sp-4);
}