/* ============================================================
   Monograph — Design Token System · By Design Builders LLC
   Palette: Ink · Bone · Clay · Pine
   Ported verbatim from the DeadStop Next.js prototype's globals.css.
   The prototype expressed the core palette through Tailwind's @theme
   and the fonts through next/font CSS variables; here both resolve to
   plain custom properties so the system is framework-free under Divi.
   ============================================================ */
:root {
  /* —— Core palette (literal hex — were Tailwind @theme --color-* tokens) —— */
  --color-ink:       #13120D;
  --color-bone:      #e2dfcf;   /* base surface — warm sandy linen */
  --color-clay:      #754c24;
  --color-clay-deep: #5a3817;
  --color-pine:      #1b3a28;
  --color-pine-soft: #2d5e42;
  --color-alabaster: #eae7d6;   /* lighter shade — airy alternate sections */
  --color-bone-deep: #c9c6b4;   /* deep warm tone */
  --color-sand-100:  #d8d5c4;   /* mid step */
  --color-sand-200:  #c9c6b4;   /* deeper step */
  --color-stone:     #525351;

  /* —— Radius — squared system —— */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   3px;

  /* —— Fonts (were next/font CSS variables; now the Google families
        enqueued in inc/enqueue.php) —— */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'Spline Sans Mono', 'Courier New', monospace;

  /* —— Raw palette shortcuts —— */
  --ink:       var(--color-ink);
  --bone:      var(--color-bone);
  --clay:      var(--color-clay);
  --clay-soft: rgba(117, 76, 36, 0.55);
  --clay-deep: var(--color-clay-deep);
  --pine:      var(--color-pine);
  --pine-soft: var(--color-pine-soft);
  --stone:     var(--color-stone);
  --alabaster: var(--color-alabaster);
  --bone-deep: var(--color-bone-deep);
  --sand-100:  var(--color-sand-100);
  --sand-200:  var(--color-sand-200);

  /* —— Semantic surfaces —— */
  --surface-page: var(--bone);
  --surface-alt:  var(--alabaster);
  /* Translucent bone for the blurred sticky header (bone = 226,223,207) */
  --paper-header: rgba(226, 223, 207, 0.88);

  /* —— Action tokens —— */
  --accent:       var(--ink);
  --accent-fg:    var(--bone);
  --accent-hover: #2a2820;
  --accent-2:     var(--clay);

  /* —— Text —— */
  --text-primary:   var(--ink);
  --text-secondary: rgba(82, 83, 81, 0.82);
  --text-muted:     rgba(82, 83, 81, 0.58);

  /* —— Borders —— */
  --border-subtle: rgba(82, 83, 81, 0.16);
  --border-strong: rgba(82, 83, 81, 0.42);

  /* —— Shadow scale (ink #13120D · pine #1b3a28) —— */
  --shadow-xs: 0 1px 2px rgba(19, 18, 13, 0.06);
  --shadow-sm: 0 2px 10px -2px rgba(19, 18, 13, 0.08);
  --shadow-md: 0 16px 34px -18px rgba(19, 18, 13, 0.24);
  --shadow-lg: 0 30px 60px -30px rgba(27, 58, 40, 0.36);

  /* —— Dark context (hero, interlude, colophon sections) —— */
  --on-dark:       #F5F2EC;
  --on-dark-soft:  rgba(245, 242, 236, 0.72);
  --on-dark-faint: rgba(245, 242, 236, 0.38);
  --on-dark-line:  rgba(245, 242, 236, 0.15);

  /* —— Display type scale (fluid — one rhythm site-wide) —— */
  --text-mast:      clamp(2.75rem, 8.5vw, 8rem);
  --text-display:   clamp(2.5rem, 5.6vw, 6rem);
  --text-cta:       clamp(2rem, 5vw, 4.5rem);
  --text-statement: clamp(1.9rem, 4.2vw, 4rem);
  --text-h1:        clamp(2rem, 4vw, 3.6rem);
  --text-h2:        clamp(1.5rem, 3vw, 2.5rem);
  --text-title:     clamp(1.5rem, 2.6vw, 2.3rem);
  --text-h3:        clamp(1.25rem, 2vw, 1.65rem);
  --text-body-lg: 17px;
  --text-body:    16px;
  --text-sm:      15px;
  --text-eyebrow: 0.6875rem; /* 11px */
  --text-nav:     12px;
  --text-brand:   12px;

  /* —— Letter spacing —— */
  --track-label: 0.34em;  /* plaque / eyebrow */
  --track-nav:   0.22em;
  --track-brand: 0.42em;
  --track-mast: -0.04em;  /* display headings */
  --track-h1:   -0.02em;
  --track-h2:    0.01em;
  --track-h3:    0.02em;

  /* —— Line height —— */
  --lh-mast: 0.88;
  --lh-body: 1.78;

  /* —— Layout —— */
  --section-y:        clamp(4rem, 8vw, 8rem);
  --section-y-sm:     clamp(3rem, 6vw, 6rem);
  --container:        1320px;
  --container-wide:   1440px;
  --container-narrow: 760px;
  --gutter:           clamp(1.25rem, 4vw, 5rem);
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* —— Motion —— */
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-reveal:  720ms;
  --dur-img:     1200ms;
  --dur-hero:    2400ms;
  --dur-line:    1150ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* —— Font weights (Monograph naming) —— */
  --fw-light:   500; /* Space Grotesk "light" in this system = 500 */
  --fw-regular: 500;
  --fw-medium:  600;
  --fw-bold:    700;
}

/* Reduced motion — zero all duration tokens. Reveal targets fall back to
   their final visible state (see global.css). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-base:   0ms;
    --dur-slow:   0ms;
    --dur-reveal: 0ms;
    --dur-img:    0ms;
    --dur-hero:   0ms;
    --dur-line:   0ms;
  }
}