/* v5 theming — the dark-purple identity is the default (:root in tokens.css).
   Here we add the LIGHT theme (data-theme="light") and density scaling.
   "system" is resolved to light/dark by an inline pre-paint script in _layout. */

/* ── Light theme ─────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --c-bg-app-rgb:        247 245 251;   /* #F7F5FB */
  --c-bg-elevated-rgb:   255 255 255;
  --c-bg-sunken-rgb:     237 233 246;
  --c-surface-1-rgb:     255 255 255;
  --c-surface-2-rgb:     244 241 251;
  --c-surface-3-rgb:     236 231 247;
  --c-surface-4-rgb:     226 219 242;

  --c-text-primary-rgb:   26 16 48;     /* #1A1030 */
  --c-text-secondary-rgb: 61 46 92;     /* #3D2E5C */
  --c-text-muted-rgb:     82 68 112;    /* darker — AA margin on light */
  --c-text-disabled-rgb:  104 92 134;   /* #685C86 — AA margin */
  --c-text-inverse-rgb:   255 255 255;
  --c-success-fg: #166534;
  --c-warning-fg: #854D0E;
  --c-info-fg: #1E40AF;
  --c-chip-fg: #5B21B6;
  --c-brand-violet: #5B21B6;
  --c-brand-violet-rgb: 91 33 182;
  --c-brand-primary-rgb: 109 40 217;

  --c-border-subtle:   rgba(26,16,48,.08);
  --c-border-default:  rgba(26,16,48,.14);
  --c-border-strong:   rgba(26,16,48,.24);

  /* risk fills get light tints; the saturated risk colours stay for text/marks */
  --c-risk-critical-bg: rgba(248,113,113,.16);
  --c-risk-high-bg:     rgba(251,146,60,.16);
  --c-risk-moderate-bg: rgba(251,191,36,.18);
  --c-risk-low-bg:      rgba(74,222,128,.16);
  --c-risk-critical-fg: #B91C1C;
  --c-risk-high-fg:     #9A3412;
  --c-risk-moderate-fg: #854D0E;
  --c-risk-low-fg:      #15803D;

  /* OT-tracker state palette (D-101) — light tints + AA-safe text-on-surface */
  --c-state-exists-bg:   rgba(34,197,94,.16);
  --c-state-low-bg:      rgba(245,158,11,.18);
  --c-state-notfound-bg: rgba(239,68,68,.16);
  --c-state-none-bg:     rgba(100,116,139,.16);
  --c-state-exists-fg:   #15803D;
  --c-state-low-fg:      #92600A;
  --c-state-notfound-fg: #B91C1C;
  --c-state-none-fg:     #475569;

  --shadow-low:  0 1px 2px rgba(26,16,48,.08);
  --shadow-mid:  0 4px 12px rgba(26,16,48,.10);
  --shadow-high: 0 12px 32px rgba(26,16,48,.16);

  color-scheme: light;
}
/* Soften the ambient gradient on light so it doesn't muddy white cards */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 600px at 80% -5%, rgba(124,58,237,.06), transparent 60%),
    radial-gradient(900px 500px at -5% 8%, rgba(124,58,237,.05), transparent 55%) !important;
}
:root[data-theme="light"] .ds-topbar { background: rgb(255 255 255 / .82); }

/* legacy secolve-* palette on light (theme-switchable vars) */
:root[data-theme="light"] {
  --legacy-tx1: 26 16 48; --legacy-tx2: 61 46 92; --legacy-tx3: 82 68 112; --legacy-tx4: 104 92 134;
  --legacy-bg: 247 245 251; --legacy-surf1: 255 255 255; --legacy-surf2: 244 241 251; --legacy-surf3: 236 231 247;
  --legacy-accent: 91 33 182;
  --legacy-rule: rgba(26,16,48,.08); --legacy-rule-hv: rgba(26,16,48,.16);
}

/* ── Density (scales the whole rem-based UI from the root font-size) ──────── */
:root[data-density="compact"]  { font-size: 14px; }
:root[data-density="spacious"] { font-size: 17px; }
/* comfortable = browser default 16px */

/* Light-theme overrides for hardcoded utility/legacy colours used in dense
   admin surfaces (editor risk grid, legacy badges) that don't use design tokens. */
:root[data-theme="light"] .text-orange-400 { color: #9A3412; }
:root[data-theme="light"] .text-amber-400 { color: #854D0E; }
:root[data-theme="light"] .text-emerald-400 { color: #166534; }
:root[data-theme="light"] .text-red-400 { color: #B91C1C; }
/* v5.12.2: risk colours as TEXT need the contrast-safe -fg variant in light mode (the raw
   risk colour, tuned for chart fills/bad<backgrounds, fails AA as text on light surfaces). */
:root[data-theme="light"] .text-risk-critical { color: var(--c-risk-critical-fg); }
:root[data-theme="light"] .text-risk-high { color: var(--c-risk-high-fg); }
:root[data-theme="light"] .text-risk-moderate { color: var(--c-risk-moderate-fg); }
:root[data-theme="light"] .text-risk-low { color: var(--c-risk-low-fg); }
:root[data-theme="light"] .badge-c { background: var(--c-risk-critical-bg); color: var(--c-risk-critical-fg); }
:root[data-theme="light"] .badge-h { background: var(--c-risk-high-bg); color: var(--c-risk-high-fg); }
:root[data-theme="light"] .badge-m { background: var(--c-risk-moderate-bg); color: var(--c-risk-moderate-fg); }
:root[data-theme="light"] .badge-l { background: var(--c-risk-low-bg); color: var(--c-risk-low-fg); }
:root[data-theme="light"] .badge-i { background: rgb(var(--c-info-rgb)/.14); color: var(--c-info-fg); }
:root[data-theme="light"] .badge-s { background: rgb(var(--c-success-rgb)/.14); color: var(--c-success-fg); }
:root[data-theme="light"] .text-secolve-err { color: var(--c-risk-critical-fg); }
:root[data-theme="light"] .text-secolve-ok  { color: var(--c-success-fg); }
:root[data-theme="light"] .text-secolve-warn { color: var(--c-warning-fg); }
:root[data-theme="light"] .text-secolve-info { color: var(--c-info-fg); }
:root[data-theme="light"] .text-secolve-high { color: var(--c-risk-high-fg); }
:root[data-theme="light"] .text-secolve-accent { color: var(--c-chip-fg); }

/* Theme-aware wordmark (v5.13.3): the logo is a MIXED-colour PNG (violet swirl +
   white text), so a CSS filter could never recolour it cleanly — the old
   hue-rotate hack skewed it to pink on light mode. Instead we ship a real
   brand-purple asset (secolve-logo-purple.png) for light and the white asset for
   dark, and toggle which <img> shows. !important beats the .brand-stack/.ds-wordmark
   display rules without a specificity war. */
.wordmark-light { display: none !important; }
:root[data-theme="light"] .wordmark-light { display: block !important; }
:root[data-theme="light"] .wordmark-dark { display: none !important; }