/* ============================================================
   Arrel — shared token layer (primitives → semantic roles → fonts).
   Used by both the "coming soon" page and the redesign.
   Layer 1 = primitives (raw Arrel-DS scale). Layer 2 = semantic roles.
   Theme = redefine the semantic layer, either globally via
   [data-theme=...] (dev panel) or per-section via .theme--* (redesign).
   ============================================================ */
:root{
  /* ---- Layer 1: primitives (Arrel DS scale) ---- */
  --p-cream-100:#FBFAF5; --p-cream-200:#F2EFE6; --p-cream-300:#E8E1D2;
  --p-cream-350:#DDD6C5; --p-cream-400:#C9C2B4;
  --p-pine-950:#0D1A11; --p-pine-900:#142F22; --p-pine-700:#1B3B2F;
  --p-pine-600:#22503A; --p-pine-500:#2A5740; --p-pine-450:#3A6B52;
  --p-char-950:#0D0D0D; --p-char-800:#1A1A1A; --p-char-700:#2A2A2A;
  --p-char-600:#333333; --p-char-500:#3D3D3D;
  --p-warm-200:#C4C0B8; --p-warm-400:#8A8680;
  --p-body-600:#6B6456; --p-body-400:#7C7566;
  --p-sage-200:#A9C4B5; --p-sage-400:#6B9A82;
  --p-ochre-300:#8F5F2A; --p-ochre-500:#B77F3C; --p-ochre-600:#D6A45E;

  /* ---- warm sun: theme-independent ---- */
  --sun-core-0:#F7D79A; --sun-core-1:#F3C178; --sun-core-2:#BC8034;
  --sun-halo:#E8A94E; --sun-glow:#BC8034; --sun-spec:#FBE6BC;

  /* ---- type: display = Fraunces, sans = Cabinet Grotesk (replaces Space Grotesk
     per the frontend-aesthetics cookbook; loaded via Fontshare on pages that use it) ---- */
  --sans: "Cabinet Grotesk", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono: "Cabinet Grotesk", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   SEMANTIC ROLE SETS — one mixin per theme, reusable.
   Applied globally (:root / [data-theme]) OR per section (.theme--*).
   ============================================================ */
:root,
[data-theme="deep-forest"],
.theme--forest{
  --bg-surface:var(--p-pine-900);
  --bg-raised:var(--p-pine-700);
  --bg-card:var(--p-pine-600);
  --text-headline:var(--p-cream-200);
  --text-body:var(--p-sage-200);
  --text-muted:var(--p-sage-400);
  --border:var(--p-pine-450);
  --hairline:rgba(242,239,230,.14);
  --accent-primary:var(--p-ochre-600);
  --accent-secondary:var(--p-sage-400);
  --accent-highlight:#E6BE82;
  --accent-rgb:214,164,94;
  --on-accent:var(--p-pine-950);
  --glass-bg:rgba(242,239,230,.08);
  --glass-bg-soft:rgba(242,239,230,.03);
  --glass-border:rgba(242,239,230,.16);
  --glass-panel:rgba(20,42,30,.44);   /* frosted section panel (translucent) */
  --glass-edge:rgba(242,239,230,.14);
  --glass-hi:rgba(242,239,230,.10);
  --shadow-rgb:0,0,0;
  --root-stroke:var(--p-sage-200);
  --grad-vignette-0:var(--p-pine-600);
  --grad-vignette-1:var(--p-pine-900);
  --grad-vignette-2:var(--p-pine-950);
  --grad-clearing-solid:var(--p-pine-900);
  --grad-clearing-mid:rgba(20,47,34,.68);
  --grad-clearing-out:rgba(20,47,34,0);
}

[data-theme="paper"],
.theme--paper{
  --bg-surface:var(--p-cream-100);
  --bg-raised:rgba(255,255,255,.65);
  --bg-card:var(--p-cream-300);
  --text-headline:var(--p-pine-700);
  --text-body:var(--p-body-600);
  --text-muted:var(--p-body-400);
  --border:var(--p-cream-400);
  --hairline:rgba(27,59,47,.14);
  --accent-primary:var(--p-ochre-500);
  --accent-secondary:var(--p-ochre-300);
  --accent-highlight:var(--p-ochre-300);
  --accent-rgb:183,127,60;
  --on-accent:var(--p-cream-100);
  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-soft:rgba(255,255,255,.40);
  --glass-border:rgba(27,59,47,.12);
  --glass-panel:rgba(251,250,245,.54);   /* frosted section panel (translucent cream) */
  --glass-edge:rgba(27,59,47,.10);
  --glass-hi:rgba(255,255,255,.60);
  --shadow-rgb:27,59,47;
  --root-stroke:var(--p-pine-700);
  --grad-vignette-0:#FFFFFF;
  --grad-vignette-1:var(--p-cream-200);
  --grad-vignette-2:var(--p-cream-300);
  --grad-clearing-solid:var(--p-cream-100);
  --grad-clearing-mid:rgba(251,250,245,.68);
  --grad-clearing-out:rgba(251,250,245,0);
}

[data-theme="charcoal"],
.theme--charcoal{
  --bg-surface:var(--p-char-950);
  --bg-raised:var(--p-char-800);
  --bg-card:var(--p-char-700);
  --text-headline:var(--p-cream-200);
  --text-body:var(--p-warm-200);
  --text-muted:var(--p-warm-400);
  --border:var(--p-char-500);
  --hairline:rgba(242,239,230,.12);
  --accent-primary:var(--p-ochre-600);
  --accent-secondary:var(--p-sage-400);
  --accent-highlight:#E6BE82;
  --accent-rgb:214,164,94;
  --on-accent:var(--p-char-950);
  --glass-bg:rgba(242,239,230,.06);
  --glass-bg-soft:rgba(242,239,230,.03);
  --glass-border:rgba(242,239,230,.12);
  --glass-panel:rgba(22,22,22,.46);   /* frosted section panel (translucent) */
  --glass-edge:rgba(242,239,230,.12);
  --glass-hi:rgba(242,239,230,.08);
  --shadow-rgb:0,0,0;
  --root-stroke:var(--p-warm-400);
  --grad-vignette-0:var(--p-char-600);
  --grad-vignette-1:var(--p-char-800);
  --grad-vignette-2:#000000;
  --grad-clearing-solid:var(--p-char-950);
  --grad-clearing-mid:rgba(13,13,13,.68);
  --grad-clearing-out:rgba(13,13,13,0);
}

/* ---- font pairings (swap --serif / --sans) ---- */
[data-font="system-inter"]{
  --serif:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:"Inter", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}
[data-font="playfair-inter"]{
  --serif:"Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}
[data-font="libre-ibm"]{
  --serif:"Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}
[data-font="newsreader-jakarta"]{
  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:"Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}