/* ============================================================
   Design tokens — AI-Agent dashboard
   See docs/plans/AIAgent_UI_Redesign_Theming.md §3.

   Loaded BEFORE style.css. Three layers:

     Layer 1  Primitives  --blue-500, --slate-50 …   raw brand values,
                                                       never consumed
                                                       directly by a
                                                       component rule.
     Layer 2  Semantics    --bg, --text, --primary …  the ONLY layer
                                                       components (or
                                                       style.css) touch.
                                                       Full LIGHT
                                                       palette lives
                                                       unconditionally
                                                       on bare :root;
                                                       dark overrides
                                                       both the
                                                       prefers-color-
                                                       scheme media
                                                       query AND the
                                                       explicit
                                                       [data-theme]
                                                       attribute.
     Layer 3  Aliases      --navy-deep, --text-primary, --intent-* …
                                                       legacy names
                                                       style.css and
                                                       the templates
                                                       already use
                                                       2,000+ times.
                                                       Re-pointed at
                                                       Layer 2 so every
                                                       existing rule
                                                       keeps working
                                                       and becomes
                                                       theme-aware for
                                                       free.

   One-off values used by exactly one (or a small handful of) rule(s)
   still belong in style.css, not here — see its own top :root block.
   ============================================================ */

:root {
    /* ── Layer 1 — brand primitives ─────────────────────────
       Raw values. Never reference these directly from a component
       rule — go through the Layer 2 semantic names below. */
    --white:     #FFFFFF;

    --slate-50:  #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-800: #1E293B;

    --navy-900:  #0A0E27;   /* app background (dark) */
    --navy-850:  #0E1330;
    --navy-800:  #141A33;
    --navy-750:  #1A1F3A;   /* panels, raised surfaces (dark) */
    --navy-700:  #232840;   /* hover / active (dark) */

    --blue-500:  #3B82F6;
    --blue-600:  #2563EB;
    --blue-700:  #1D4ED8;
    --blue-400:  #60A5FA;

    --green-500: #10B981;
    --green-400: #34D399;
    --green-700: #047857;

    --amber-500: #F59E0B;
    --amber-400: #FBBF24;
    --amber-700: #B45309;

    --red-500:   #EF4444;
    --red-400:   #F87171;
    --red-700:   #B91C1C;

    --cyan-500:  #06B6D4;
    --cyan-400:  #22D3EE;
    --cyan-700:  #0E7490;

    --purple-500: #8B5CF6;
    --purple-400: #C084FC;  /* dark-theme ink already shipped at this
                                shade (style.css .ui-intent-chitchat);
                                kept exact rather than the plan's
                                #A78BFA to preserve the Phase 1
                                pixel-identical dark checkpoint. */
    --purple-700: #6D28D9;

    /* ── Layer 2 — semantics: LIGHT (unconditional) ─────────
       Every token resolves here first. Dark overrides below only
       ever override these same names — nothing is defined ONLY
       inside a media query or [data-theme] block. */
    --bg:            var(--slate-50);
    --bg-subtle:     var(--slate-100);
    --surface:       var(--white);
    --surface-2:     var(--slate-50);
    --surface-3:     var(--slate-100);
    --overlay:       rgba(15, 23, 42, 0.4);

    --border-line:   var(--slate-200);
    --border-strong: var(--slate-500);
    --border-w:      1px;

    --text:          var(--slate-800);
    --text-muted:    var(--slate-500);
    --text-subtle:   var(--slate-400);
    --text-inverse:  var(--white);

    /* Brand / status roles — fill (solid), soft (tinted badge bg),
       ink (accessible text/icon on the current ground). Fill is
       identical in both themes; soft/ink flip per theme. */
    --primary:       var(--blue-500);
    --primary-soft:  color-mix(in srgb, var(--primary) 12%, var(--surface));
    --primary-ink:   var(--blue-700);

    /* CONTRAST DECISION (plan §8): #FFFFFF on #3B82F6 is 3.68:1 —
       fails WCAG AA for small text. --primary-strong is the fill for
       buttons and any other solid primary surface carrying small
       white/inverse text (#FFF on #2563EB ≈ 5.1:1, passes AA).
       --primary stays the identity colour for borders, icons, focus
       rings, active-state bars and brand marks — those are non-text
       UI (≥3:1 required) and stay the recognizable brand blue.
       --primary-strong (and its hover shade) is IDENTICAL in both
       themes on purpose, per plan §3.2: buttons must look the same
       regardless of theme. This is the one deliberate pixel change
       from the pre-theming dark site (button fill was --accent-blue
       #3B82F6, now --primary-strong #2563EB) — every other dark
       value in this file is unchanged. */
    --primary-strong:       var(--blue-600);
    --primary-strong-hover: var(--blue-700);

    --accent:        var(--green-500);
    --accent-soft:   color-mix(in srgb, var(--accent) 12%, var(--surface));
    --accent-ink:    var(--green-700);

    --warn:          var(--amber-500);
    --warn-soft:     color-mix(in srgb, var(--warn) 12%, var(--surface));
    --warn-ink:      var(--amber-700);

    --danger:        var(--red-500);
    --danger-soft:   color-mix(in srgb, var(--danger) 12%, var(--surface));
    --danger-ink:    var(--red-700);

    --info:          var(--cyan-500);
    --info-soft:     color-mix(in srgb, var(--info) 12%, var(--surface));
    --info-ink:      var(--cyan-700);

    --purple:        var(--purple-500);
    --purple-soft:   color-mix(in srgb, var(--purple) 12%, var(--surface));
    --purple-ink:    var(--purple-700);

    --neutral:       var(--slate-400);
    --neutral-soft:  color-mix(in srgb, var(--neutral) 12%, var(--surface));
    --neutral-ink:   var(--slate-600);

    /* Status pill fill+text pairs (consumed via the --intent-*
       aliases below / {% status_pill %}). Light values use the new
       soft/ink formula; dark values are EXACT — unchanged from what
       shipped before this refactor. */
    --intent-success-bg: var(--accent-soft);
    --intent-success-fg: var(--accent-ink);
    --intent-warning-bg: var(--warn-soft);
    --intent-warning-fg: var(--warn-ink);
    --intent-danger-bg:  var(--danger-soft);
    --intent-danger-fg:  var(--danger-ink);
    --intent-info-bg:    var(--primary-soft);
    --intent-info-fg:    var(--primary-ink);
    --intent-neutral-bg: var(--neutral-soft);
    --intent-neutral-fg: var(--neutral-ink);

    /* Shape (per the requested spec — theme-invariant) */
    --radius-sm:   6px;
    --radius:      8px;
    --radius-lg:   12px;
    --radius-pill: 9999px;

    /* Depth — 0px x-offset / 2px+ base y-offset per the requested
       spec; dark uses higher alpha rather than bigger blur. */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow:    0 2px 4px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.12);

    --ring: 0 0 0 3px var(--primary-soft);

    --brand-gradient: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    --blue-glow:      rgba(59, 130, 246, 0.18);
    --blue-glow-lg:   rgba(59, 130, 246, 0.4);

    /* Native form-control colour-scheme (style.css .pc-input[type=time],
       .ui-select) — was hardcoded `dark`; now follows the theme. */
    --native-color-scheme: light;

    /* ── Spacing scale ──────────────────────────────────────
       Replaces 30+ hand-typed padding/gap values. If a value
       isn't on this scale, it probably shouldn't be. */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;

    /* ── Type scale ─────────────────────────────────────────
       Replaces the 14.5 / 13.5 / 12.5 / 11.5px one-offs that
       accumulated across pages. */
    --fs-xs:    11px;
    --fs-sm:    12px;
    --fs-base:  14px;
    --fs-md:    15px;
    --fs-lg:    18px;
    --fs-xl:    24px;

    --lh-tight: 1.2;
    --lh-base:  1.5;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ── Radius (legacy scale names — kept; see --radius-* above) ─ */
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-full: 9999px;

    /* ── Elevation ──────────────────────────────────────────
       --e-1/--e-2 alias the new shadow scale so every existing
       consumer becomes theme-aware for free. */
    --e-1: var(--shadow-sm);
    --e-2: var(--shadow-lg);

    /* ── Motion ─────────────────────────────────────────────── */
    --t-fast: 0.15s ease;
    --t-mid:  0.25s ease;

    /* ── Layer 3 — legacy aliases ────────────────────────────
       What every existing style.css rule / template already names.
       Re-pointed at Layer 2 semantics so the existing ~2,300 lines
       of CSS keep working unchanged and pick up theming for free.
       Never rename these across the codebase — retarget only. */
    --navy-deep:  var(--bg);
    --navy-slate: var(--surface-2);
    --navy-mid:   var(--surface-3);
    --border:     var(--border-line);

    --text-primary:   var(--text);
    --text-secondary: var(--text-muted);

    --accent-blue:   var(--primary);
    --accent-green:  var(--accent);
    --accent-amber:  var(--warn);
    --accent-purple: var(--purple);
    --accent-cyan:   var(--info);
    --accent-red:    var(--danger);
    --accent-slate:  var(--neutral);

    --surface-base:   var(--bg);
    --surface-raised: var(--surface-2);
    --surface-hover:  var(--surface-3);
    --surface-sunken: var(--bg);

    --intent-success: var(--accent);
    --intent-warning: var(--warn);
    --intent-danger:  var(--danger);
    --intent-info:    var(--primary);
    --intent-neutral: var(--neutral);
}

/* ── Layer 2 — semantics: DARK ───────────────────────────────
   Three theme states: explicit light (bare :root above), explicit
   dark ([data-theme="dark"] below — wins over the OS preference),
   and system (this media query, only when no explicit choice was
   made). Every dark value here that already shipped is EXACT —
   unchanged from the pre-theming dark-only site. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            var(--navy-900);
        --bg-subtle:     var(--navy-850);
        --surface:       var(--navy-800);
        --surface-2:     var(--navy-750);
        --surface-3:     var(--navy-700);
        --overlay:       rgba(0, 0, 0, 0.5);

        --border-line:   rgba(255, 255, 255, 0.1);
        --border-strong: rgba(255, 255, 255, 0.16);

        --text:          #F1F5F9;
        --text-muted:    var(--slate-400);
        --text-subtle:   var(--slate-500);

        --primary-soft:  color-mix(in srgb, var(--primary) 18%, var(--surface));
        --primary-ink:   var(--blue-400);

        --accent-soft:   color-mix(in srgb, var(--accent) 18%, var(--surface));
        --accent-ink:    var(--green-400);

        --warn-soft:     color-mix(in srgb, var(--warn) 18%, var(--surface));
        --warn-ink:      var(--amber-400);

        --danger-soft:   color-mix(in srgb, var(--danger) 18%, var(--surface));
        --danger-ink:    var(--red-400);

        --info-soft:     color-mix(in srgb, var(--info) 18%, var(--surface));
        --info-ink:      var(--cyan-400);

        --purple-soft:   color-mix(in srgb, var(--purple) 18%, var(--surface));
        --purple-ink:    var(--purple-400);

        --neutral-soft:  color-mix(in srgb, var(--neutral) 18%, var(--surface));
        --neutral-ink:   var(--slate-400);

        /* Status pills — EXACT pre-refactor values */
        --intent-success-bg: rgba(16, 185, 129, 0.16);
        --intent-success-fg: #34D399;
        --intent-warning-bg: rgba(245, 158, 11, 0.18);
        --intent-warning-fg: #FBBF24;
        --intent-danger-bg:  rgba(239, 68, 68, 0.16);
        --intent-danger-fg:  #FCA5A5;
        --intent-info-bg:    rgba(59, 130, 246, 0.16);
        --intent-info-fg:    #93C5FD;
        --intent-neutral-bg: rgba(148, 163, 184, 0.15);
        --intent-neutral-fg: #CBD5E1;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow:    0 2px 4px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);

        --native-color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg:            var(--navy-900);
    --bg-subtle:     var(--navy-850);
    --surface:       var(--navy-800);
    --surface-2:     var(--navy-750);
    --surface-3:     var(--navy-700);
    --overlay:       rgba(0, 0, 0, 0.5);

    --border-line:   rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.16);

    --text:          #F1F5F9;
    --text-muted:    var(--slate-400);
    --text-subtle:   var(--slate-500);

    --primary-soft:  color-mix(in srgb, var(--primary) 18%, var(--surface));
    --primary-ink:   var(--blue-400);

    --accent-soft:   color-mix(in srgb, var(--accent) 18%, var(--surface));
    --accent-ink:    var(--green-400);

    --warn-soft:     color-mix(in srgb, var(--warn) 18%, var(--surface));
    --warn-ink:      var(--amber-400);

    --danger-soft:   color-mix(in srgb, var(--danger) 18%, var(--surface));
    --danger-ink:    var(--red-400);

    --info-soft:     color-mix(in srgb, var(--info) 18%, var(--surface));
    --info-ink:      var(--cyan-400);

    --purple-soft:   color-mix(in srgb, var(--purple) 18%, var(--surface));
    --purple-ink:    var(--purple-400);

    --neutral-soft:  color-mix(in srgb, var(--neutral) 18%, var(--surface));
    --neutral-ink:   var(--slate-400);

    --intent-success-bg: rgba(16, 185, 129, 0.16);
    --intent-success-fg: #34D399;
    --intent-warning-bg: rgba(245, 158, 11, 0.18);
    --intent-warning-fg: #FBBF24;
    --intent-danger-bg:  rgba(239, 68, 68, 0.16);
    --intent-danger-fg:  #FCA5A5;
    --intent-info-bg:    rgba(59, 130, 246, 0.16);
    --intent-info-fg:    #93C5FD;
    --intent-neutral-bg: rgba(148, 163, 184, 0.15);
    --intent-neutral-fg: #CBD5E1;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow:    0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);

    --native-color-scheme: dark;
}