/* Ghemel design tokens (Design Baseline §2). Brand = the logo's bold primaries:
   electric blue (primary action), red + yellow (the swatch-fan accents), ink.
   Components reference semantic aliases only. */
:root {
  /* Layer 1 — primitives */
  --neutral-0:#ffffff; --neutral-50:#f6f7f9; --neutral-100:#eceef2; --neutral-200:#dfe2e8;
  --neutral-300:#c6cbd4; --neutral-400:#949aab; --neutral-500:#687084;
  --neutral-600:#4a5162; --neutral-700:#343a48; --neutral-800:#222733; --neutral-900:#12151d; --neutral-950:#0a0c12;

  --blue-50:#e9edff; --blue-100:#d4ddff; --blue-200:#aab8ff; --blue-300:#7a8dff; --blue-400:#4a5fff;
  --blue-500:#2340ff; --blue-600:#002afc; --blue-700:#0021c4; --blue-800:#001c9e; --blue-900:#001678; --blue-950:#000d44;
  --red-50:#ffe9e4; --red-100:#ffd3c9; --red-500:#fc3a16; --red-600:#e02c0c; --red-700:#b8240a;
  --yellow-50:#fff6d6; --yellow-100:#ffedad; --yellow-400:#ffd21e; --yellow-500:#f5c400; --yellow-600:#c99d00;
  --green-600:#108a4f; --green-50:#e7f6ee;

  /* Layer 2 — semantic aliases */
  --bg-canvas:var(--neutral-50); --bg-surface:var(--neutral-0); --bg-raised:var(--neutral-0);
  --bg-sunken:var(--neutral-100); --bg-overlay:rgba(10,12,18,.55);
  --text-primary:var(--neutral-900); --text-secondary:var(--neutral-600); --text-muted:var(--neutral-500);
  --text-on-brand:#ffffff; --text-disabled:var(--neutral-400);
  --border-subtle:var(--neutral-200); --border-default:var(--neutral-300); --border-strong:var(--neutral-400);
  --brand:var(--blue-600); --brand-hover:var(--blue-700); --brand-active:var(--blue-800); --brand-subtle:var(--blue-50);
  --accent-red:var(--red-500); --accent-red-bg:var(--red-50); --accent-yellow:var(--yellow-400); --accent-yellow-bg:var(--yellow-50);
  --intent-success:var(--green-600); --intent-success-bg:var(--green-50);
  --intent-warning:var(--yellow-600); --intent-warning-bg:var(--yellow-50); --intent-warning-border:var(--yellow-400);
  --intent-danger:var(--red-600); --intent-danger-bg:var(--red-50);
  --focus-ring:var(--blue-500);

  /* type / space / radius / motion */
  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-20:1.25rem;
  --fs-24:1.5rem; --fs-30:1.875rem; --fs-36:2.25rem; --fs-48:3rem; --fs-60:3.75rem;
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px;
  --r-6:6px; --r-8:8px; --r-12:12px; --r-16:16px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(10,12,18,.06),0 1px 1px rgba(10,12,18,.04);
  --shadow-md:0 2px 6px rgba(10,12,18,.07),0 8px 24px rgba(10,12,18,.08);
  --shadow-lg:0 4px 12px rgba(10,12,18,.10),0 24px 48px rgba(10,12,18,.12);
  --ease:cubic-bezier(.2,0,0,1);
  --font-sans:"Helvetica Neue",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,monospace;
  --sidebar-w:244px; --topbar-h:64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-canvas:var(--neutral-950); --bg-surface:var(--neutral-900); --bg-raised:var(--neutral-800); --bg-sunken:#161a23;
    --text-primary:var(--neutral-50); --text-secondary:var(--neutral-300); --text-muted:var(--neutral-400);
    --border-subtle:#242a36; --border-default:#333a48; --border-strong:#495063;
    --brand:var(--blue-400); --brand-hover:var(--blue-300); --brand-subtle:#0e1640;
    --accent-yellow-bg:#2a2410; --accent-red-bg:#2a1512; --intent-warning-bg:#2a2410; --intent-success-bg:#0f2a1c;
  }
}