/* ═══════════════════════════════════════════════════════
   EWA DESIGN TOKENS — the single source of truth
   ═══════════════════════════════════════════════════════

   Loaded by EVERY shell — base.html, login.html, index.html — BEFORE that
   page's own stylesheet. Load order is load-bearing: tokens must be defined
   before any rule reads them.

   Two independent axes on <html>, both applied by the head inline script in
   each shell from localStorage (ewa-theme / ewa-palette):

     data-bs-theme  dark | light
     data-tenant    default | claude | neutrak-dark | graphite-violet
                    | midnight-teal | vanilla          <-- PALETTE, not customer

   NOTE  data-tenant names a PALETTE. It is unrelated to the customer tenant
   id, which lives in localStorage['ewa-tenant-id'] and in base.html's
   server-side render. Never wire a customer id into this attribute — a
   customer called "vanilla" would silently restyle the app.

   Until 2026-08-16 these blocks were duplicated in login.css and index.css,
   and all three copies had drifted apart. Add palettes HERE only.
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   1. SHARED (layout, typography, transitions)
   ───────────────────────────────────────────────────── */
:root {
    --ewa-sidebar-width:      230px;
    --ewa-sidebar-collapsed:  68px;
    --ewa-radius-sm:          6px;
    --ewa-radius-md:          10px;
    --ewa-radius-lg:          14px;
    --ewa-font-body:          'Outfit', sans-serif;
    --ewa-font-mono:          'IBM Plex Mono', monospace;
    --ewa-transition:         0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ewa-transition-slow:    0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────
   2. DARK-MODE SURFACES (per tenant)
   ───────────────────────────────────────────────────── */

/* ── default ─ */
[data-tenant="default"][data-bs-theme="dark"] {
    --ewa-bg:                 #111111;
    --ewa-surface-0:          #191919;
    --ewa-surface-1:          #212121;
    --ewa-surface-2:          #2a2a2a;
    --ewa-surface-3:          #333333;
    --ewa-surface-hover:      #252525;
    --ewa-border:             #3a3a3a;
    --ewa-border-subtle:      #2c2c2c;
    --ewa-border-accent:      #484848;
/*    --ewa-text:               #f0f0f0;
    --ewa-text-secondary:     #a8a8a8;
    --ewa-text-muted:         #6a6a6a;
    --ewa-text-inverse:       #111111;*/
    --ewa-text:               #f5f5f5;
    --ewa-text-secondary:     #c0c0c0;
    --ewa-text-muted:         #888888;
    --ewa-text-inverse:       #1a1a1a;
}
/* ── claude ─ */
[data-tenant="claude"][data-bs-theme="dark"] {
    --ewa-bg:                 #282828;
    --ewa-surface-0:          #1e1e1e;
    --ewa-surface-1:          #212121;
    --ewa-surface-2:          #2a2a2a;
    --ewa-surface-3:          #333333;
    --ewa-surface-hover:      #252525;
    --ewa-border:             #3a3a3a;
    --ewa-border-subtle:      #2c2c2c;
    --ewa-border-accent:      #484848;
/*    --ewa-text:               #f0f0f0;
    --ewa-text-secondary:     #a8a8a8;
    --ewa-text-muted:         #6a6a6a;
    --ewa-text-inverse:       #111111;*/
    --ewa-text:               #f5f5f5;
    --ewa-text-secondary:     #c0c0c0;
    --ewa-text-muted:         #888888;
    --ewa-text-inverse:       #1a1a1a;
}
/* ── neutrak-dark ─ */
[data-tenant="neutrak-dark"][data-bs-theme="dark"] {
    --ewa-bg:                 #0f1115;
    --ewa-surface-0:          #151821;
    --ewa-surface-1:          #1b1f2a;
    --ewa-surface-2:          #222735;
    --ewa-surface-3:          #2a3142;
    --ewa-surface-hover:      #202635;
    --ewa-border:             #2f3545;
    --ewa-border-subtle:      #242938;
    --ewa-border-accent:      #3a4258;
    --ewa-text:               #dde8f4;
    --ewa-text-secondary:     #a3c0d6;
    --ewa-text-muted:         #728ea8;
    --ewa-text-inverse:       #0f1115;
}
/* ── graphite-violet ─ */
[data-tenant="graphite-violet"][data-bs-theme="dark"] {
    --ewa-bg:                 #111217;
    --ewa-surface-0:          #171923;
    --ewa-surface-1:          #1d2030;
    --ewa-surface-2:          #24283a;
    --ewa-surface-3:          #2c3145;
    --ewa-surface-hover:      #21263a;
    --ewa-border:             #2e3448;
    --ewa-border-subtle:      #222637;
    --ewa-border-accent:      #3b4060;
    --ewa-text:               #e4e8f0;
    --ewa-text-secondary:     #b3bcd0;
    --ewa-text-muted:         #7d86b2;
    --ewa-text-inverse:       #111217;
}
/* ── midnight-teal ─ */
[data-tenant="midnight-teal"][data-bs-theme="dark"] {
    --ewa-bg:                 #0e1318;
    --ewa-surface-0:          #141a21;
    --ewa-surface-1:          #1a212a;
    --ewa-surface-2:          #202833;
    --ewa-surface-3:          #273240;
    --ewa-surface-hover:      #1d2530;
    --ewa-border:             #2c3744;
    --ewa-border-subtle:      #1f2833;
    --ewa-border-accent:      #354354;
    --ewa-text:               #ddeef5;
    --ewa-text-secondary:     #92b9cc;
    --ewa-text-muted:         #628da3;
    --ewa-text-inverse:       #0e1318;
}

/* ── vanilla · dark ─
   Vanilla is offered only under Light in the picker, so this pairing was
   unreachable and never defined — but :root carries NO colour tokens, so
   any way of reaching it (a stored value, a mode-only toggle) rendered
   with every surface var() resolving to nothing. Vanilla stays "plain" in
   dark too: default's surfaces, vanilla's own grey accent. */
[data-tenant="vanilla"][data-bs-theme="dark"] {
    --ewa-bg:                 #111111;
    --ewa-surface-0:          #191919;
    --ewa-surface-1:          #212121;
    --ewa-surface-2:          #2a2a2a;
    --ewa-surface-3:          #333333;
    --ewa-surface-hover:      #252525;
    --ewa-border:             #3a3a3a;
    --ewa-border-subtle:      #2c2c2c;
    --ewa-border-accent:      #484848;
    --ewa-text:               #f5f5f5;
    --ewa-text-secondary:     #c0c0c0;
    --ewa-text-muted:         #888888;
    --ewa-text-inverse:       #1a1a1a;
}

/* ─────────────────────────────────────────────────────
   3. SHARED LIGHT-MODE SURFACES (base for all tenants)
   ───────────────────────────────────────────────────── */
[data-bs-theme="light"] {
    --ewa-bg:                 #ffffff;
    --ewa-surface-0:          #ffffff;
    --ewa-surface-1:          #f8f8f8;
    --ewa-surface-2:          #f0f0f0;
    --ewa-surface-3:          #e8e8e8;
    --ewa-surface-hover:      #f0f0f0;
    --ewa-border:             #ddd;
    --ewa-border-subtle:      #eee;
    --ewa-border-accent:      #ccc;
    --ewa-text:               #000;
    --ewa-text-secondary:     #333;
    --ewa-text-muted:         #777;
    --ewa-text-inverse:       #fff;
}


/* ─────────────────────────────────────────────────────
   4. ACCENT PALETTES (apply in both dark and light)
   ───────────────────────────────────────────────────── */

/* ── default · Amber ─ */
[data-tenant="default"] {
    --ewa-accent:             #f5a524;
    --ewa-accent-hover:       #ffb84d;
    --ewa-accent-subtle:      rgba(245,165,36,0.10);
    --ewa-accent-glow:        rgba(245,165,36,0.20);
    --ewa-accent-border:      rgba(245,165,36,0.30);
    --ewa-green:              #28a745;
    --ewa-amber:              #f59e0b;
    --ewa-red:                #f04c4c;
    --ewa-blue:               #4d8ff5;
    /*--ewa-green-subtle:       rgba(34,212,114,0.10);*/
    --ewa-red-subtle:         rgba(240,76,76,0.10);
}
/* ── claude · Amber ─ */
[data-tenant="claude"] {
    --ewa-accent:             #f5a524;
    --ewa-accent-hover:       #ffb84d;
    --ewa-accent-subtle:      rgba(245,165,36,0.10);
    --ewa-accent-glow:        rgba(245,165,36,0.20);
    --ewa-accent-border:      rgba(245,165,36,0.30);
    --ewa-green:              #28a745;
    --ewa-amber:              #f59e0b;
    --ewa-red:                #f04c4c;
    --ewa-blue:               #4d8ff5;
    /*--ewa-green-subtle:       rgba(34,212,114,0.10);*/
    --ewa-red-subtle:         rgba(240,76,76,0.10);
}
/* ── neutrak-dark · Blue ─ */
[data-tenant="neutrak-dark"] {
    --ewa-accent:             #4f8cff;
    --ewa-accent-hover:       #6aa3ff;
    --ewa-accent-subtle:      rgba(79,140,255,0.12);
    --ewa-accent-glow:        rgba(79,140,255,0.25);
    --ewa-accent-border:      rgba(79,140,255,0.35);
    --ewa-green:              #28a745;
    --ewa-amber:              #f59e0b;
    --ewa-red:                #f04c4c;
    --ewa-blue:               #4f8cff;
    /*--ewa-green-subtle:       rgba(34,212,114,0.10);*/
    --ewa-red-subtle:         rgba(240,76,76,0.10);
}
/* ── graphite-violet · Violet ─ */
[data-tenant="graphite-violet"] {
    --ewa-accent:             #8b5cf6;
    --ewa-accent-hover:       #a78bfa;
    --ewa-accent-subtle:      rgba(139,92,246,0.14);
    --ewa-accent-glow:        rgba(139,92,246,0.25);
    --ewa-accent-border:      rgba(139,92,246,0.35);
    --ewa-green:              #28a745;
    --ewa-amber:              #f59e0b;
    --ewa-red:                #f04c4c;
    --ewa-blue:               #60a5fa;
    /*--ewa-green-subtle:       rgba(34,212,114,0.10);*/
    --ewa-red-subtle:         rgba(240,76,76,0.10);
}
/* ── midnight-teal · Teal ─ */
[data-tenant="midnight-teal"] {
    --ewa-accent:             #14b8a6;
    --ewa-accent-hover:       #2dd4bf;
    --ewa-accent-subtle:      rgba(20,184,166,0.12);
    --ewa-accent-glow:        rgba(20,184,166,0.25);
    --ewa-accent-border:      rgba(20,184,166,0.35);
    --ewa-green:              #28a745;
    --ewa-amber:              #f59e0b;
    --ewa-red:                #f04c4c;
    --ewa-blue:               #38bdf8;
    /*--ewa-green-subtle:       rgba(34,212,114,0.10);*/
    --ewa-red-subtle:         rgba(240,76,76,0.10);
}
/* ── vanilla · Gray ─ */
[data-tenant="vanilla"] {
    --ewa-accent:             #555;
    --ewa-accent-hover:       #333;
    --ewa-accent-subtle:      rgba(0,0,0,0.06);
    --ewa-accent-glow:        rgba(0,0,0,0.10);
    --ewa-accent-border:      rgba(0,0,0,0.15);
    --ewa-green:              #28a745;
    --ewa-amber:              #e6a817;
    --ewa-red:                #dc3545;
    --ewa-blue:               #007bff;
    /* Every other palette defines this; vanilla did not, so error tints
       (agent-settings, update-system, agent-dashboard) rendered with no
       background under Vanilla. */
    --ewa-red-subtle:         rgba(220,53,69,0.10);
}

/* ─────────────────────────────────────────────────────
   5. LIGHT-MODE SURFACE OVERRIDES (per tenant)
   ───────────────────────────────────────────────────── */