/* tokens.css — Design tokens as CSS custom properties.
 *
 * All design values are expressed here as CSS custom properties.
 * Components reference only these tokens — never raw values.
 * Dark mode overrides are in the [data-theme="dark"] selector and
 * @media (prefers-color-scheme: dark) to support both explicit toggle
 * and OS-level preference.
 */

:root {
  /* --- Color palette: light mode --- */
  --color-bg:            #FDF8F4;
  --color-surface:       #FFFFFF;
  --color-text-primary:  #1C1917;
  --color-text-secondary:#78716C;
  --color-border:        #E7E0D9;

  /* Accent */
  --color-accent-rust:   #7C2D12;
  --color-accent-teal:   #0F766E;

  /* Priority border/badge colors */
  --color-p0: #DC2626;
  --color-p1: #EA580C;
  --color-p2: #CA8A04;
  --color-p3: #78716C;

  /* Priority wash backgrounds (tinted surface for overdue/curated) */
  --color-overdue-wash:     #FEF2F2;
  --color-overdue-border:   #DC2626;
  --color-curated-wash:     #F0FDFA;
  --color-curated-border:   #0F766E;

  /* --- Spacing scale (4px base) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* --- Typography --- */
  --font-body:  'Rubik', system-ui, -apple-system, sans-serif;
  --font-mono:  'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  --font-size-base: 17px;
  --font-size-sm:   14px;
  --font-size-xs:   12px;
  --font-size-badge: 11px;
  --line-height-base: 1.5;

  /* --- Borders & Radius --- */
  --radius-card: 0 8px 8px 0;
  --radius-badge: 4px;
  --radius-panel: 8px;
  --border-card-width: 4px;

  /* --- Shadow --- */
  --shadow-card:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-panel:      -4px 0 24px rgba(0,0,0,.12);

  /* --- Transition --- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* --- Detail panel --- */
  --panel-width: 420px;

  /* --- Column flex --- */
  --col-ready-flex: 2;
  --col-work-flex:  1;
  --col-pending-flex: 1;
}

/* Dark mode: OS preference */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #0F1419;
    --color-surface:       #1A2128;
    --color-text-primary:  #D4DCE3;
    --color-text-secondary:#8B99A8;
    --color-border:        #1F2934;
    --color-accent-rust:   #E66533;
    --color-accent-teal:   #39ADB5;

    --color-overdue-wash:     #2D1515;
    --color-overdue-border:   #DC2626;
    --color-curated-wash:     #0D2320;
    --color-curated-border:   #39ADB5;

    --shadow-card:       0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
    --shadow-card-hover: 0 4px 12px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.25);
    --shadow-panel:      -4px 0 24px rgba(0,0,0,.40);
  }
}

/* Dark mode: explicit toggle via data-theme attribute */
[data-theme="dark"] {
  --color-bg:            #0F1419;
  --color-surface:       #1A2128;
  --color-text-primary:  #D4DCE3;
  --color-text-secondary:#8B99A8;
  --color-border:        #1F2934;
  --color-accent-rust:   #E66533;
  --color-accent-teal:   #39ADB5;

  --color-overdue-wash:     #2D1515;
  --color-overdue-border:   #DC2626;
  --color-curated-wash:     #0D2320;
  --color-curated-border:   #39ADB5;

  --shadow-card:       0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.25);
  --shadow-panel:      -4px 0 24px rgba(0,0,0,.40);
}

[data-theme="light"] {
  --color-bg:            #FDF8F4;
  --color-surface:       #FFFFFF;
  --color-text-primary:  #1C1917;
  --color-text-secondary:#78716C;
  --color-border:        #E7E0D9;
  --color-accent-rust:   #7C2D12;
  --color-accent-teal:   #0F766E;

  --color-overdue-wash:     #FEF2F2;
  --color-overdue-border:   #DC2626;
  --color-curated-wash:     #F0FDFA;
  --color-curated-border:   #0F766E;

  --shadow-card:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-panel:      -4px 0 24px rgba(0,0,0,.12);
}