/* ============================================================
   SELLiora TOKENS — canonical design tokens (single source)
   ------------------------------------------------------------
   Base brand-engine + semantic colour tokens for light and dark.
   Consumed by index.html (the app), selliora-design-system.css
   and design-system.html so the token contract never drifts.
   Primary/accent derive from --brand-x / --accent-x → the Branding
   Customizer recolours everything by changing 6 values.
   ============================================================ */
:root{
  /* ── Brand engine (change these 6 to rebrand the whole product) ── */
  --brand-h:219;--brand-s:44%;--brand-l:22%;
  --accent-h:25;--accent-s:95%;--accent-l:53%;
  --text-on-primary:#ffffff;
  --ring:hsl(var(--brand-h),var(--brand-s),var(--brand-l),.26);

  /* primary = deep slate-navy (actions, links) · accent = Selliora orange */
  --p:hsl(var(--brand-h),var(--brand-s),var(--brand-l));
  --pd:hsl(var(--brand-h),var(--brand-s),calc(var(--brand-l) - 7%));
  --pm:hsl(var(--brand-h),calc(var(--brand-s) - 6%),calc(var(--brand-l) + 15%));
  --pl:hsl(var(--brand-h),calc(var(--brand-s) - 6%),94%);
  --acc:hsl(var(--accent-h),var(--accent-s),var(--accent-l));
  --acc-d:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) - 10%));
  --acc-l:hsl(var(--accent-h),calc(var(--accent-s) - 5%),95%);

  /* semantic status */
  --g:#136B45;--gb:#E1F3EA;--gbd:#79BE9C;
  --a:#8A4B0B;--ab:#FBEBD8;--abd:#DE9A3C;
  --r:#9B1C1C;--rb:#FBE5E5;--rbd:#E59595;
  --bb:#E0EDF9;--bc:#12558F;

  /* surfaces / text (light) */
  --bg:#F5F7FA;--s:#ffffff;--s2:#F7F9FC;
  --bd:#E7EBF1;--bd2:#D6DDE7;
  --t:#111826;--t2:#5A6472;--t3:#8A94A3;
  --inp:#FFFFFF;--inp-bd:#CBD2DC;--card:#FFFFFF;
  /* clean light sidebar (brand-tinted active); dark theme overrides below */
  --sbar:#ffffff;--sbar-t:#5A6472;--sbar-hv:#F2F5F9;--sbar-ac:var(--pl);--sbar-bd:#E7EBF1;
  --aibd:#CBD6E4;--aitx:#1F3050;

  /* radius / elevation / layout */
  --rad:14px;--rads:10px;
  --shadow:0 1px 2px rgba(17,24,38,.05),0 1px 3px rgba(17,24,38,.05);
  --shadow-lg:0 10px 28px rgba(17,24,38,.10);
  --sbw:230px;
}

/* ═══ DARK THEME ═══ */
[data-theme="dark"]{
  --brand-l:68%;--accent-s:100%;--accent-l:62%;
  --text-on-primary:#0B0F16;
  --ring:hsl(var(--brand-h),var(--brand-s),var(--brand-l),.30);
  --p:hsl(var(--brand-h),var(--brand-s),var(--brand-l));
  --pd:hsl(var(--brand-h),var(--brand-s),calc(var(--brand-l) + 9%));
  --pm:hsl(var(--brand-h),var(--brand-s),calc(var(--brand-l) - 14%));
  --pl:hsl(var(--brand-h),30%,16%);
  --acc:hsl(var(--accent-h),var(--accent-s),var(--accent-l));
  --acc-d:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) - 11%));
  --acc-l:hsl(var(--accent-h),45%,12%);
  --g:#5FC48A;--gb:#12291F;--gbd:#2C5641;
  --a:#EFB45F;--ab:#2E2314;--abd:#6E5423;
  --r:#F08A8A;--rb:#331A1A;--rbd:#6E2F2F;
  --bb:#152A3E;--bc:#7CBCEF;
  --bg:#0B0F16;--s:#151A22;--s2:#1D232D;
  --bd:#28303B;--bd2:#3A434F;
  --t:#E8ECF2;--t2:#A6B0BE;--t3:#96A1AF;
  --inp:#1D232D;--inp-bd:#3A434F;--card:#151A22;
  --sbar:#080B11;--sbar-t:rgba(255,255,255,.62);--sbar-hv:rgba(255,255,255,.06);--sbar-ac:rgba(255,255,255,.11);--sbar-bd:rgba(255,255,255,.08);
  --aibd:#31435C;--aitx:#CFE0F2;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);--shadow-lg:0 8px 28px rgba(0,0,0,.5);
}