/* ===========================================================================
   Elga Lillo -- design tokens. Light is default; dark = [data-theme="dark"].
   Nothing in the rest of the stylesheet hardcodes a colour: every value used
   elsewhere comes from a custom property defined here (ADR-0010 / ticket 03).
   =========================================================================== */
:root{
  /* colour */
  --bg:#f4f4f2; --panel:#ffffff; --panel-2:#fafaf8;
  --fg:#0b0b0b; --muted:#6a6a67; --faint:#a4a4a0;
  --rule:#e3e3de; --rule-strong:#cbcbc4; --frame-rule:var(--rule);
  --accent:oklch(0.62 0.15 48); --accent-fg:#ffffff;
  --wash:color-mix(in oklab, var(--accent) 12%, transparent);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 40px -20px rgba(0,0,0,.16);
  --topbar-shade:linear-gradient(to bottom, rgba(0,0,0,.07), rgba(0,0,0,0));

  /* type */
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-body:"DM Sans", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;

  --h1:clamp(34px, 6.6vw, 78px);
  --h2:clamp(26px, 3.4vw, 40px);
  --h3:clamp(22px, 2.6vw, 30px);
  --h4:20px;
  --price:clamp(28px, 3vw, 36px);
  --quote:clamp(19px, 2.2vw, 27px);
  --lede:clamp(16px, 1.5vw, 19px);

  /* space + geometry */
  --container:1140px;
  --bar-h:68px;
  --anchor-offset:84px;
  --pad-y:clamp(44px, 6vw, 76px);
  --pad-x:clamp(20px, 4vw, 44px);
  --gap:clamp(16px, 2vw, 22px);
  --gap-lg:clamp(22px, 3vw, 40px);

  --r-xs:5px; --r-sm:6px; --r-md:12px; --r-lg:14px; --r-xl:16px; --r-2xl:18px; --r-pill:999px;

  --ease:160ms ease-out;
}

[data-theme="dark"]{
  --bg:#0c0c0d; --panel:#141416; --panel-2:#101012;
  --fg:#f3f2ef; --muted:#9c9c98; --faint:#66666b;
  --rule:#242427; --rule-strong:#3a3a40;
  --accent:oklch(0.72 0.15 55); --accent-fg:#17110b;
  --wash:color-mix(in oklab, var(--accent) 16%, transparent);
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 24px 50px -24px rgba(0,0,0,.8);
}

/* Honour the OS preference on first visit, before the visitor has chosen --
   the inline head script in base.html overrides this with data-theme once
   a choice has been persisted (ticket 03: no flash of the wrong theme). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0c0c0d; --panel:#141416; --panel-2:#101012;
    --fg:#f3f2ef; --muted:#9c9c98; --faint:#66666b;
    --rule:#242427; --rule-strong:#3a3a40;
    --accent:oklch(0.72 0.15 55); --accent-fg:#17110b;
    --wash:color-mix(in oklab, var(--accent) 16%, transparent);
  }
}