/* ─────────────────────────────────────────────────────────────
   KissAPI theme — single source of truth for every static page.

   Pages used to inline their own :root block, so a colour change meant
   editing every file. Link this instead and delete the local block.

   The legacy names (--surface, --accent, --accent2) are kept as aliases
   onto the new ramp so existing page CSS keeps working untouched.
   ───────────────────────────────────────────────────────────── */

:root{
  color-scheme:dark;

  /* Neutral 9-step ramp — zero hue cast */
  --g50:#e6e6e6; --g100:#cdcece; --g200:#9c9c9d; --g300:#6a6b6c;
  --g400:#434345; --g500:#2f3031; --g600:#1b1c1e; --g700:#111214;
  --g800:#0c0d0f; --g900:#07080a;

  --bg:var(--g900);
  --bg-100:rgb(16,17,17);
  --bg-200:rgb(24,25,26);
  --bg-300:rgb(49,49,51);

  /* Elevation ladder. Panels must never be painted the page colour, or the
     page reads as one flat plane held together by hairlines. Each step is a
     visible jump in luminance, which is what actually reads as depth. */
  --elev-1:#0d0e11;   /* large panels: grids, tables, cards */
  --elev-2:#14161a;   /* cells and rows that sit inside a panel */
  --elev-3:#1c1f24;   /* raised: featured card, selected states */
  --shadow-1:0 1px 2px rgba(0,0,0,.5),0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-2:0 2px 4px rgba(0,0,0,.55),0 18px 44px -12px rgba(0,0,0,.7);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,.045);

  --text:hsl(240,11%,96%);
  --text2:rgb(160,166,170);
  --text3:#78787c;

  --border:hsl(195,5%,15%);
  --border-hi:hsl(195,5%,22%);

  /* Semantic accents — point use only, never fills */
  --blue:hsl(202,100%,67%);
  --green:hsl(151,59%,59%);
  --yellow:hsl(43,100%,60%);
  --red:hsl(0,100%,69%);
  --violet:#d3b2ff;
  --blue-t:hsla(202,100%,67%,.14);
  --green-t:hsla(151,59%,59%,.14);
  --yellow-t:hsla(43,100%,60%,.14);
  --violet-t:rgba(211,178,255,.14);

  /* White-first CTA */
  --btn-bg:hsla(0,0%,100%,.92);
  --btn-bg-hover:#fff;
  --btn-fg:rgb(18,19,20);

  --radius:20px;
  --radius-md:12px;
  --radius-sm:6px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);

  /* ── Legacy aliases ──
     Sub-pages were written against an older palette. Mapping the old names
     onto the ramp means they inherit the new theme without touching their
     own rules. --surface deliberately lands on --elev-1, not on --bg, so
     those pages gain the elevation step for free. */
  --surface:var(--elev-1);
  --surface2:var(--elev-2);

  /* These two are NOT interchangeable and must not collapse into one value.
     Sub-page CSS uses --accent as a solid fill behind white text (nav-cta,
     btn-primary, badges) and --accent2 as a light text colour on dark. Pointing
     both at --violet (#d3b2ff) put white text on a pale fill at 1.81:1.
     --accent is dark enough for white text (5.6:1) while still clearing 3:1
     against the page, so it also reads as a shape. */
  --accent:#8149ca;
  --accent-hover:#9159d8;
  --accent2:var(--violet);
  --accent-t:rgba(129,73,202,.16);
}