/* =============================================================================
   Playground Design System — tokens.css
   v0.1 — Phase 1
   Aksel/Digdir-aligned. Norwegian public sector. WCAG 2.1 AA.
   ============================================================================= */

:root {
  /* ---------- Typography -------------------------------------------------- */
  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;
  --font-family-serif: "Source Serif 4", Georgia, serif;

  --font-size-xs: 13px;
  --font-size-sm: 15px;
  --font-size-md: 17px;          /* body default */
  --font-size-lg: 19px;
  --font-size-xl: 23px;
  --font-size-2xl: 28px;
  --font-size-3xl: 34px;
  --font-size-4xl: 44px;

  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-normal: 1.55;
  --measure: 65ch;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---------- Primary (Digdir) ------------------------------------------- */
  --color-primary-50:  #E8F1FB;
  --color-primary-100: #C6DCF4;
  --color-primary-200: #9CC0EA;
  --color-primary-300: #6FA5DD;
  --color-primary-400: #3B83CB;
  --color-primary-500: #0062BA;       /* Digdir blue */
  --color-primary-600: #00569F;
  --color-primary-700: #004A8F;
  --color-primary-800: #003A70;
  --color-primary-900: #002F5C;

  /* ---------- Severity ramp (deuteranopia-safe) ------------------------- */
  --color-severity-low:       #1A7F37;
  --color-severity-medium:    #BF8700;
  --color-severity-high:      #CC5A00;
  --color-severity-critical:  #A40E26;
  --color-severity-extreme:   #66050F;

  /* Soft fills (matrix cells, badges) */
  --color-severity-low-soft:       #DDF4E4;
  --color-severity-medium-soft:    #FBF0CC;
  --color-severity-high-soft:      #FCE0CC;
  --color-severity-critical-soft:  #F8D7DC;
  --color-severity-extreme-soft:   #E8C7CC;

  /* Foreground on severity bg */
  --color-severity-low-on:       #0E4A20;
  --color-severity-medium-on:    #5C3F00;
  --color-severity-high-on:      #5C2900;
  --color-severity-critical-on:  #FFFFFF;
  --color-severity-extreme-on:   #FFFFFF;

  /* ---------- State (distinct from severity) --------------------------- */
  --color-state-success: #1A7F37;
  --color-state-warning: #BF8700;
  --color-state-failed:  #7D1A1A;     /* dark desaturated red — "broke" */
  --color-state-blocked: #5C2D91;     /* purple — distinct */
  --color-state-info:    #0969DA;
  --color-state-running: #BF8700;
  --color-state-queued:  #6E7781;
  --color-state-pending: #4D7DAD;
  --color-state-done:    #1A7F37;

  /* ---------- Surface / background ------------------------------------- */
  --color-bg:              #FBFAF7;     /* warm off-white page */
  --color-bg-soft:         #F4F2EC;     /* subtle section */
  --color-surface:         #FFFFFF;
  --color-surface-raised:  #FFFFFF;
  --color-surface-sunken:  #F1EEE7;
  --color-overlay:         rgba(15, 18, 22, 0.45);

  /* ---------- Border --------------------------------------------------- */
  --color-border-subtle:   #E4E0D6;
  --color-border-moderate: #C8C2B3;
  --color-border-strong:   #6E7781;
  --color-border-focus:    #0062BA;

  /* ---------- Text ----------------------------------------------------- */
  --color-text-primary:    #1F2328;
  --color-text-secondary:  #4D5663;
  --color-text-tertiary:   #6E7781;
  --color-text-on-primary: #FFFFFF;
  --color-text-link:       #00569F;
  --color-text-link-hover: #002F5C;

  /* ---------- Plugin scope colors -------------------------------------- */
  --color-scope-architect: #0F6E76;     /* ms-ai-architect — petrol */
  --color-scope-okr:       #9A6700;     /* OKR — amber */
  --color-scope-security:  #A40E26;     /* llm-security — crimson */
  --color-scope-ultraplan: #4338CA;     /* ultraplan-local — indigo */
  --color-scope-config:    #3F5963;     /* config-audit — slate */

  /* ---------- Spacing -------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Radius --------------------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---------- Shadow --------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 18, 22, 0.04), 0 0 0 1px rgba(15, 18, 22, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 18, 22, 0.06), 0 4px 12px rgba(15, 18, 22, 0.04);
  --shadow-lg: 0 4px 8px rgba(15, 18, 22, 0.06), 0 12px 32px rgba(15, 18, 22, 0.06);
  --shadow-focus: 0 0 0 3px rgba(0, 98, 186, 0.35);

  /* ---------- Motion --------------------------------------------------- */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --ease-default: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Layout --------------------------------------------------- */
  --container-narrow: 720px;
  --container-default: 1080px;
  --container-wide: 1280px;
  --sidebar-width: 280px;
}

:root { color-scheme: light; }

[data-theme="dark"] {
  --color-bg:             #0F1419;
  --color-bg-soft:        #161B22;
  --color-surface:        #1A2027;
  --color-surface-raised: #232A33;
  --color-surface-sunken: #0B1015;

  --color-border-subtle:   #2A323C;
  --color-border-moderate: #3B4452;
  --color-border-strong:   #6E7781;

  --color-text-primary:    #E6EDF3;
  --color-text-secondary:  #B0BAC4;
  --color-text-tertiary:   #8B96A2;
  --color-text-link:       #6FA5DD;
  --color-text-link-hover: #9CC0EA;

  /* Severity soft fills tuned for dark surfaces */
  --color-severity-low-soft:      #163322;
  --color-severity-medium-soft:   #3A2C0A;
  --color-severity-high-soft:     #3D260F;
  --color-severity-critical-soft: #3B0F18;
  --color-severity-extreme-soft:  #2A0408;

  --color-severity-low-on:      #7FE0A0;
  --color-severity-medium-on:   #F2C66B;
  --color-severity-high-on:     #F09060;
  --color-severity-critical-on: #FFFFFF;
  --color-severity-extreme-on:  #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(111, 165, 221, 0.45);

  color-scheme: dark;
}

/* Light theme overrides — Aksel-aligned, WCAG AA-validated.
   Full mirror of the dark block (26 vars) so renderers reading any
   theme-overridable token in dark mode also resolve in light mode.
   See research/04-wcag-dual-theme-tokens.md for hex sources + AA validation. */
[data-theme="light"] {
  --color-bg:             #ffffff;
  --color-bg-soft:        #ecedef;
  --color-surface:        #ffffff;
  --color-surface-raised: #f5f6f7;
  --color-surface-sunken: #ecedef;

  --color-border-subtle:   #cfd3d8;
  --color-border-moderate: #6f7785;
  --color-border-strong:   #5d6573;

  --color-text-primary:    #202733;
  --color-text-secondary:  #49515e;
  --color-text-tertiary:   #6f7785;       /* borderline 4.5:1 — reserve for non-body (eyebrows, labels) */
  --color-text-link:       #1a5f99;
  --color-text-link-hover: #002459;

  /* Severity soft fills + on-colors tuned for light surfaces (Aksel). */
  --color-severity-low-soft:      #e2fde8;
  --color-severity-medium-soft:   #fff5e4;
  --color-severity-high-soft:     #fff2f0;
  --color-severity-critical-soft: #fff2f7;
  --color-severity-extreme-soft:  #fff0f3;

  --color-severity-low-on:      #002e00;
  --color-severity-medium-on:   #481700;
  --color-severity-high-on:     #560000;
  --color-severity-critical-on: #560000;
  --color-severity-extreme-on:  #ffffff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 3px rgba(26, 95, 153, 0.4);

  color-scheme: light;
}

/* Auto dark when no override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}