/* ─────────────────────────────────────────────────────────────────────────────
   Werkhaus Design Tokens
   Single source of truth for every color, font, spacing, and radius value.
   All other CSS files import this. Never hardcode values outside this file.
───────────────────────────────────────────────────────────────────────────── */

/* ── Dark mode (default) ─────────────────────────────────────────────────── */
:root {
  /* Backgrounds — layered depth system */
  --wk-bg-base:      #080810;   /* outermost page background */
  --wk-bg-1:         #0e0e1a;   /* nav panel, topbar */
  --wk-bg-2:         #13131f;   /* cards, inputs */
  --wk-bg-3:         #1a1a28;   /* hover states, nested surfaces */
  --wk-bg-overlay:   rgba(8,8,16,0.92); /* modals, drawers */

  /* Borders */
  --wk-border:       #1e1e30;   /* default border */
  --wk-border-hover: #2e2e46;   /* hover border */
  --wk-border-focus: #5b8af5;   /* focus ring */

  /* Text */
  --wk-text:         #e2e3f0;   /* primary text (design library D4) */
  --wk-text-2:       #8a8ca8;   /* secondary / labels */
  --wk-text-3:       #50526a;   /* tertiary / placeholders */
  --wk-text-hi:      #eef0ff;   /* high-emphasis titles */
  --wk-text-invert:  #ffffff;   /* text on colored fills */

  /* Brand accent */
  --wk-accent:       #5b8af5;
  --wk-accent-dim:   rgba(91,138,245,0.15);  /* legacy alias - prefer tints below */
  --wk-accent-hover: #7aa9ff;   /* design library D4 */

  /* Accent tint system (design library D5): the ONLY allowed accent alphas.
     wash = large fills, tint = chips/hovers, ring = borders/focus. */
  --wk-accent-wash:  rgba(91,138,245,0.06);
  --wk-accent-tint:  rgba(91,138,245,0.12);
  --wk-accent-ring:  rgba(91,138,245,0.40);

  /* Semantic */
  --wk-green:        #2dd478;
  --wk-green-dim:    rgba(45,212,120,0.12);
  --wk-green-wash:   rgba(45,212,120,0.08);
  --wk-green-ring:   rgba(45,212,120,0.35);
  --wk-amber:        #f5a623;
  --wk-amber-dim:    rgba(245,166,35,0.12);
  --wk-amber-wash:   rgba(245,166,35,0.08);
  --wk-amber-ring:   rgba(245,166,35,0.40);
  --wk-red:          #f04f4f;
  --wk-red-dim:      rgba(240,79,79,0.12);
  --wk-red-wash:     rgba(240,79,79,0.08);
  --wk-red-ring:     rgba(240,79,79,0.40);
  --wk-purple:       #8b5cf6;
  --wk-purple-dim:   rgba(139,92,246,0.12);
  --wk-purple-wash:  rgba(139,92,246,0.08);
  --wk-purple-ring:  rgba(139,92,246,0.40);
  --wk-teal:         #22d3ee;
  --wk-teal-dim:     rgba(34,211,238,0.12);

  /* Typography (design library D1: Instrument Sans; Syne retired) */
  --wk-font-display: 'Instrument Sans', sans-serif;
  --wk-font-body:    'DM Sans', sans-serif;
  --wk-font-mono:    'JetBrains Mono', monospace;

  /* Layout */
  --wk-rail-w:       52px;
  --wk-nav-w:        200px;
  --wk-topbar-h:     52px;
  --wk-footer-h:     40px;
  --wk-sidebar-w:    260px;
  --wk-sidebar-wide: 460px;

  /* Radii (design library D6: 4 / 8 / 12 / 16 / 999, nothing else) */
  --wk-r-sm:  4px;
  --wk-r-md:  8px;
  --wk-r-lg:  12px;
  --wk-r-xl:  16px;
  --wk-r-pill: 999px;

  /* Spacing scale */
  --wk-space-1:  4px;
  --wk-space-2:  8px;
  --wk-space-3:  12px;
  --wk-space-4:  16px;
  --wk-space-5:  20px;
  --wk-space-6:  24px;

  /* Transitions */
  --wk-ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --wk-duration: 160ms;
}

/* ── Light mode ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --wk-bg-base:      #f0f0f8;
    --wk-bg-1:         #ffffff;
    --wk-bg-2:         #ffffff;
    --wk-bg-3:         #f4f4fc;
    --wk-bg-overlay:   rgba(240,240,248,0.95);

    --wk-border:       #e2e2f0;
    --wk-border-hover: #c8c8e0;
    --wk-border-focus: #4070e8;

    --wk-text:         #1a1a2e;
    --wk-text-2:       #6060a0;
    --wk-text-3:       #9898c0;
    --wk-text-hi:      #12122a;
    --wk-text-invert:  #ffffff;

    --wk-accent:       #4070e8;
    --wk-accent-dim:   rgba(64,112,232,0.1);
    --wk-accent-hover: #2855d4;
    --wk-accent-wash:  rgba(64,112,232,0.07);
    --wk-accent-tint:  rgba(64,112,232,0.13);
    --wk-accent-ring:  rgba(64,112,232,0.45);

    --wk-green:        #18a852;
    --wk-green-dim:    rgba(24,168,82,0.1);
    --wk-green-wash:   rgba(24,168,82,0.09);
    --wk-green-ring:   rgba(24,168,82,0.40);
    --wk-amber:        #c47c0a;
    --wk-amber-dim:    rgba(196,124,10,0.1);
    --wk-amber-wash:   rgba(196,124,10,0.09);
    --wk-amber-ring:   rgba(196,124,10,0.40);
    --wk-red:          #d43030;
    --wk-red-dim:      rgba(212,48,48,0.1);
    --wk-red-wash:     rgba(212,48,48,0.09);
    --wk-red-ring:     rgba(212,48,48,0.45);
    --wk-purple:       #6d40d4;
    --wk-purple-dim:   rgba(109,64,212,0.1);
    --wk-purple-wash:  rgba(109,64,212,0.09);
    --wk-purple-ring:  rgba(109,64,212,0.45);
    --wk-teal:         #0898b4;
    --wk-teal-dim:     rgba(8,152,180,0.1);
  }
}

/* ── Manual theme override (data-theme attribute) ────────────────────────── */
[data-theme="dark"]  { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

[data-theme="light"] {
  --wk-bg-base:      #f0f0f8;
  --wk-bg-1:         #ffffff;
  --wk-bg-2:         #ffffff;
  --wk-bg-3:         #f4f4fc;
  --wk-bg-overlay:   rgba(240,240,248,0.95);
  --wk-border:       #e2e2f0;
  --wk-border-hover: #c8c8e0;
  --wk-border-focus: #4070e8;
  --wk-text:         #1a1a2e;
  --wk-text-2:       #6060a0;
  --wk-text-3:       #9898c0;
  --wk-text-hi:      #12122a;
  --wk-text-invert:  #ffffff;

  --wk-accent:       #4070e8;
  --wk-accent-dim:   rgba(64,112,232,0.1);
  --wk-accent-hover: #2855d4;
  --wk-accent-wash:  rgba(64,112,232,0.07);
  --wk-accent-tint:  rgba(64,112,232,0.13);
  --wk-accent-ring:  rgba(64,112,232,0.45);

  --wk-green:        #18a852;
  --wk-green-dim:    rgba(24,168,82,0.1);
  --wk-green-wash:   rgba(24,168,82,0.09);
  --wk-green-ring:   rgba(24,168,82,0.40);
  --wk-amber:        #c47c0a;
  --wk-amber-dim:    rgba(196,124,10,0.1);
  --wk-amber-wash:   rgba(196,124,10,0.09);
  --wk-amber-ring:   rgba(196,124,10,0.40);
  --wk-red:          #d43030;
  --wk-red-dim:      rgba(212,48,48,0.1);
  --wk-red-wash:     rgba(212,48,48,0.09);
  --wk-red-ring:     rgba(212,48,48,0.45);
  --wk-purple:       #6d40d4;
  --wk-purple-dim:   rgba(109,64,212,0.1);
  --wk-purple-wash:  rgba(109,64,212,0.09);
  --wk-purple-ring:  rgba(109,64,212,0.45);
  --wk-teal:         #0898b4;
  --wk-teal-dim:     rgba(8,152,180,0.1);
}

[data-theme="dark"] {
  --wk-bg-base:      #080810;
  --wk-bg-1:         #0e0e1a;
  --wk-bg-2:         #13131f;
  --wk-bg-3:         #1a1a28;
  --wk-border:       #1e1e30;
  --wk-border-hover: #2e2e46;
  --wk-text:         #e2e3f0;
  --wk-text-2:       #8a8ca8;
  --wk-text-3:       #50526a;
  --wk-text-hi:      #eef0ff;
  --wk-accent:       #5b8af5;
  --wk-accent-dim:   rgba(91,138,245,0.15);
  --wk-accent-hover: #7aa9ff;
  --wk-accent-wash:  rgba(91,138,245,0.06);
  --wk-accent-tint:  rgba(91,138,245,0.12);
  --wk-accent-ring:  rgba(91,138,245,0.40);
  --wk-green-wash:   rgba(45,212,120,0.08);
  --wk-green-ring:   rgba(45,212,120,0.35);
  --wk-amber-wash:   rgba(245,166,35,0.08);
  --wk-amber-ring:   rgba(245,166,35,0.40);
  --wk-red-wash:     rgba(240,79,79,0.08);
  --wk-red-ring:     rgba(240,79,79,0.40);
  --wk-purple-wash:  rgba(139,92,246,0.08);
  --wk-purple-ring:  rgba(139,92,246,0.40);
  --wk-green:        #2dd478;
  --wk-green-dim:    rgba(45,212,120,0.12);
  --wk-amber:        #f5a623;
  --wk-amber-dim:    rgba(245,166,35,0.12);
  --wk-red:          #f04f4f;
  --wk-red-dim:      rgba(240,79,79,0.12);
  --wk-purple:       #8b5cf6;
  --wk-purple-dim:   rgba(139,92,246,0.12);
  --wk-teal:         #22d3ee;
  --wk-teal-dim:     rgba(34,211,238,0.12);
}

/* ── Team colour (Two Hats, approved 2026-10-16) ─────────────────────────────
   An alias of purple: purple means Team and nothing else. Declared on every
   element that carries a theme so the alias follows the theme it sits in. */
:root, [data-theme="dark"], [data-theme="light"] {
  --wk-team:      var(--wk-purple);
  --wk-team-dim:  var(--wk-purple-dim);
  --wk-team-wash: var(--wk-purple-wash);
  --wk-team-ring: var(--wk-purple-ring);
  --wk-team-ink:  #ffffff;
}