/* ============================================================
   sitekit — design tokens
   One brand, two weathers: dark = Granite & Copper (Glaucous),
   light = Jet & Slate (Import 6, warmed with copper trims).
   Shared: Alice Blue + Muted Teal + Copper.
   ============================================================ */

:root {
  /* type */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* shape & motion */
  --radius: 16px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: .35s ease;

  /* dark — Granite & Copper */
  --dark-bg: #3a4f41;  --dark-ink: #ebf2fa;  --dark-head: #9dcbba;
  --dark-copper: #ad8350; --dark-btn-copper: #8f6229;

  /* light — Jet & Slate (warmed) */
  --light-bg: #ebf2fa; --light-ink: #1f363d; --light-head: #53628d;
  --light-teal: #9dcbba; --light-copper: #c4a883; --light-copper-ink: #7c5c2e;
}

html[data-theme="dark"] {
  --bg: var(--dark-bg);
  --ink: var(--dark-ink);
  --head: var(--dark-head);
  --card: rgba(235, 242, 250, .05);
  --card-edge: rgba(235, 242, 250, .14);
  --card-top: var(--dark-copper);
  --btn1-bg: var(--dark-ink);   --btn1-fg: var(--dark-bg);
  --btn2-bg: var(--dark-btn-copper); --btn2-fg: var(--dark-ink);
  --ghost-c: var(--dark-ink);   --ghost-b: rgba(235, 242, 250, .65);
  --pill-bg: rgba(157, 203, 186, .14); --pill-fg: var(--dark-head); --pill-b: rgba(157, 203, 186, .42);
  --trim: var(--dark-copper);
  --tag: rgba(235, 242, 250, .78);
  --shadow: rgba(0, 0, 0, .4);
  --rule: rgba(235, 242, 250, .12);
  --glow: radial-gradient(46rem 24rem at 50% -8rem, rgba(173, 131, 80, .09), transparent 70%);
}

html[data-theme="light"] {
  --bg: var(--light-bg);
  --ink: var(--light-ink);
  --head: var(--light-head);
  --card: #ffffff;
  --card-edge: #d8e2ee;
  --card-top: var(--light-copper);
  --btn1-bg: var(--light-ink);  --btn1-fg: var(--light-bg);
  --btn2-bg: var(--light-teal); --btn2-fg: var(--light-ink);
  --ghost-c: var(--light-ink);  --ghost-b: rgba(31, 54, 61, .6);
  --pill-bg: rgba(196, 168, 131, .18); --pill-fg: var(--light-copper-ink); --pill-b: rgba(196, 168, 131, .5);
  --trim: var(--light-copper);
  --tag: #3d4f58;
  --shadow: rgba(31, 54, 61, .14);
  --rule: #d8e2ee;
  --glow: radial-gradient(46rem 24rem at 50% -8rem, rgba(196, 168, 131, .16), transparent 70%);
}