/* ui/theme.css — single source of truth for the Web-CMS CONTROL-PANEL chrome. Redesign 2026 · "Quiet Precision": neutral, near-white workspaces with hairline borders (Vercel/Linear-inspired), ONE interactive accent (iris/indigo) and solid near-black primary CTAs. Dark scope for the editor uses the same neutral ramp. Strategy = minimal churn: the legacy token names (--bg/--panel/--blue/…) that the existing component CSS already consumes are ALIASED onto the new neutral ramp, scoped by surface — light at :root (dashboards), dark under [data-theme="dark"] (editor). So hundreds of existing `var(--blue)` rules re-colour themselves with no per-rule edits. ⚠ This file styles the APP CHROME only. The design system of the WEBSITES THE TOOL GENERATES lives in the --cms-* namespace (studio/designsystem.mjs, studio/tokens.mjs) and is what the design-system tests assert on — never touch those from here. */ :root{ /* ── raw neutral ramp (Quiet Precision brief) ── */ --paper:#FAFAFA; /* page backdrop — near-white, calm */ --card:#FFFFFF; /* content cards / sidebar / topbar */ --card-2:#F4F4F5; /* inset / field background */ --card-3:#E9E9EC; /* active / track */ --line-l:#E4E4E7; /* hairline on light */ --ink-d:#18181B; /* near-black — primary text on light */ --ink-d2:#51525C; /* secondary text on white — AA+ */ --ink-d3:#70707B; /* muted / hint on white — AA 4.6:1 */ --ink-shell:#18181B; /* primary text on the (now light) shell */ --ink-shell-2:#51525C; /* secondary text on the shell */ /* legacy names kept as DARK-INK utilities (tooltips, code blocks) */ --navy:#18181B; /* dark tooltip / inverse surface */ --navy-2:#27272A; --navy-3:#111113; /* code blocks (
) stay dark on purpose */
  --navy-rail:#FFFFFF;   /* sidebar surface (light) — consumed by ui/shell.css */

  /* ── the one accent: iris ── */
  --accent:#4F46E5;      /* iris — links, active nav, selection, focus */
  --accent-2:#6366F1;    /* soft iris — hover / focus ring */
  --accent-ink:#FFFFFF;  /* text on filled iris */
  --accent-soft:rgba(79,70,229,.08);   /* iris wash (selected rows, active pills bg) */

  /* solid primary CTA (Vercel-style near-black button) */
  --cta:#18181B;
  --cta-ink:#FFFFFF;

  /* functional colors */
  --ok:#16A34A;
  --ok-2:#22C55E;
  --warn:#B45309;
  --danger:#DC2626;

  /* ── shape + depth (crisper, flatter) ── */
  --radius-pill:999px;
  --radius-card:12px;
  --radius-ctl:8px;
  --shadow-card:0 1px 2px rgba(24,24,27,.04);
  --shadow-pop:0 4px 12px rgba(24,24,27,.08), 0 16px 44px rgba(24,24,27,.12);
  --grad-iris:linear-gradient(90deg,#4F46E5,#6366F1);

  /* ── shell metrics (shared, consumed by ui/shell.css) ── */
  --rail-w:224px; --rail-w-slim:64px; --topbar-h:56px;

  /* ── LIGHT mapping — dashboards (Studio · Admin · Dashboard) ──
     legacy name : new value */
  --bg:var(--paper);
  --panel:var(--card);
  --panel-2:var(--card-2);
  --panel-3:var(--card-3);
  --line:var(--line-l);
  --ink:var(--ink-d);
  --ink-2:var(--ink-d2);
  --ink-3:var(--ink-d3);
  --blue:var(--accent);          /* THE key alias — every --blue rule becomes iris */
  --green:var(--ok);
  --red:var(--danger);
  --amber:var(--warn);
  --pink:var(--accent-2);        /* legacy magenta → soft iris (keeps brand coherent) */
  --grad:var(--grad-iris);
  --send:linear-gradient(135deg,#6366F1,#4F46E5);
  --focus:var(--accent-2);
  color-scheme:light;
}

/* ── DARK mapping — Editor only (set ) ── */
[data-theme="dark"]{
  --bg:#0A0A0B;
  --panel:#111113;
  --panel-2:#18181B;
  --panel-3:#212124;
  --line:#28282D;
  --ink:#F4F4F5;
  --ink-2:#A1A1AA;
  --ink-3:#71717A;
  --blue:#818CF8;                /* soft iris — deep iris is too dark as a highlight on near-black */
  --green:var(--ok-2);
  --red:#F87171;
  --amber:#FBBF24;
  --pink:#818CF8;
  --grad:linear-gradient(90deg,#818CF8,#6366F1);
  --send:linear-gradient(135deg,#818CF8,#4F46E5);
  --focus:#818CF8;
  --accent-soft:rgba(129,140,248,.12);
  --cta:#EDEDEF;                 /* dark-mode primary CTA: white button, dark text */
  --cta-ink:#111113;
  --navy-rail:#111113;           /* editor rail follows the dark panel */
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.45);
  --shadow-pop:0 18px 50px rgba(0,0,0,.6);
  color-scheme:dark;
}