/* ============================================================
   MADSEN STUDIO — tokens.css (v2: sky-day pivot)
   Airy day-light theme — pale sky paper, soft slate ink,
   sky-blue accent, sun-gold CTA. Fraunces serif for display.
   ============================================================ */

:root {
  /* Color — Luke-style dark monochrome: near-black canvas, warm off-white ink, sun-gold accent.
     (v3: dark pivot — was sky-day. Token MEANINGS kept; only values flipped.) */
  --paper:      #0A0A0B;        /* near-black canvas (was pale sky) */
  --paper-2:    #141417;        /* elevated panel surface */
  --paper-3:    #1C1C20;        /* deeper panel for variation */
  --ink:        #ECEAE2;        /* warm off-white — primary text (was deep slate) */
  --ink-2:      #9C9A93;        /* muted warm grey — secondary text */
  --ink-3:      #6A6862;        /* dim grey — tertiary */
  --hairline:   rgba(236, 234, 226, 0.10);
  --hairline-2: rgba(236, 234, 226, 0.20);

  /* Accent — one warm thread (soft gold): italic emphasis + hover-underlines */
  --clay:       #CBA968;        /* soft gold (was sky-blue) */
  --clay-deep:  #D4A85B;        /* sun-gold */
  --clay-soft:  rgba(203, 169, 104, 0.12);

  /* Sun-gold — primary CTA accent */
  --warm:       #D4A85B;        /* warm sun-gold, primary CTAs */
  --warm-deep:  #B58A3F;
  --warm-soft:  rgba(212, 168, 91, 0.12);

  /* Secondary neutral (was sage) — kept neutral grey in monochrome */
  --sage:       #8A8C86;
  --sage-soft:  rgba(138, 140, 134, 0.10);

  /* Segment scene — barely-lifted near-black (was grayish beige working surface) */
  --beige:      #0F0F12;

  /* Deep panels (was dusk surfaces) — elevated dark sections */
  --ink-bg:     #141417;        /* elevated panel */
  --ink-bg-2:   #1C1C20;        /* slightly lighter panel */
  --paper-on-ink: #ECEAE2;      /* off-white text on dark panels */

  --scrim:      rgba(6, 6, 8, 0.85);

  /* Type families */
  --f-display:  "Fraunces", "Times New Roman", Georgia, serif;
  --f-body:     "Plus Jakarta Sans", "Helvetica Neue", system-ui, sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, monospace;
  --f-accent:   "Shrikhand", "Fraunces", Georgia, serif;  /* fat display serif — eyebrow accents only */
  --f-grotesk:  "Anton", "Arial Narrow", "Arial", sans-serif;  /* tall condensed display — services menu + walkthrough */

  /* Type scale — unchanged */
  --t-display-xl: clamp(64px, 11vw, 200px);
  --t-display-l:  clamp(44px, 7vw,  104px);
  --t-display-m:  clamp(30px, 3.6vw, 56px);
  --t-lead:       clamp(19px, 1.5vw, 24px);
  --t-body:       17px;
  --t-small:      14px;
  --t-mono:       11px;
  --t-mono-l:     13px;

  /* Spacing scale — unchanged */
  --s-1:  4px;  --s-2:  8px;   --s-3:  12px;
  --s-4:  16px; --s-5:  24px;  --s-6:  32px;
  --s-7:  48px; --s-8:  64px;  --s-9:  96px;
  --s-10: 144px;

  /* Layout — unchanged */
  --gutter: clamp(24px, 5vw, 80px);
  --rhythm: clamp(96px, 12vw, 180px);
  --max:    1360px;

  /* Rules */
  --rule: 1px;
  --r-0:  0;
  --r-1:  2px;

  /* Cloud-noise — softer, larger fractals (replacing fine paper-grain).
     Bigger blobs feel atmospheric/cloudy instead of newspaper-grainy.
     Slight blue-tint to match sky-day palette. */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.65  0 0 0 0 0.78  0 0 0 0 0.92  0 0 0 0.10 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");

  /* Fine grain (kept for areas that want texture without cloudiness) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.22  0 0 0 0 0.32  0 0 0 0.08 0'/></filter><rect width='220' height='220' filter='url(%23g)'/></svg>");

  /* Shadow — black-based depth for the dark canvas (was blue cloud-shadow) */
  --shadow-card-soft:
    0 4px 12px rgba(0, 0, 0, 0.40),
    0 16px 40px rgba(0, 0, 0, 0.30),
    0 32px 64px -16px rgba(0, 0, 0, 0.55);

  --shadow-card-hover:
    0 8px 16px rgba(0, 0, 0, 0.50),
    0 24px 56px rgba(0, 0, 0, 0.40),
    0 48px 96px -24px rgba(0, 0, 0, 0.65);
}