/* ============================================================
   STRATUM LABS — DESIGN TOKENS
   Brand Identity System v1 · March 2026
   ============================================================ */

:root {

  /* ── Colour: Primary ──────────────────────────────────── */
  --red:        #D42B25;
  --ink:        #1C1C1C;
  --white:      #FFFFFF;

  /* ── Colour: Neutral Range ───────────────────────────── */
  --stone-50:   #F5F4F2;
  --stone-200:  #E2E0DC;
  --stone-500:  #888784;
  --stone-800:  #3A3835;

  /* ── Colour: Semantic ────────────────────────────────── */
  --color-bg:          var(--white);
  --color-text:        var(--ink);
  --color-text-soft:   var(--stone-800);
  --color-text-muted:  var(--stone-500);
  --color-border:      var(--stone-200);
  --color-surface:     var(--stone-50);
  --color-accent:      var(--red);

  /* ── Colour: Signal (propagation animation) ──────────── */
  --signal-gain:    #2A7A4B;  /* momentum / amplification   */
  --signal-mutate:  #C47B00;  /* mutation / shift           */
  --signal-reverse: var(--red); /* reversal                 */

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Lora', Georgia, serif;

  /* Fluid type scale via clamp(min, preferred, max) */
  --text-d1:      clamp(3rem,    6vw,   5.5rem);   /* Hero — apple metaphor   */
  --text-d2:      clamp(2.25rem, 4.5vw, 4rem);     /* Killer lines            */
  --text-h1:      clamp(1.75rem, 3vw,   2.5rem);   /* Section headings        */
  --text-h2:      clamp(1.25rem, 2vw,   1.625rem); /* Sub-section headings    */
  --text-body:    clamp(1rem,    1.15vw, 1.125rem); /* Body prose              */
  --text-small:   clamp(0.875rem, 1vw,  1rem);     /* Supporting text         */
  --text-caption: clamp(0.625rem, 0.75vw, 0.75rem);/* Labels / metadata       */

  /* ── Spacing: 8px base unit ─────────────────────────── */
  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   48px;
  --space-6:   64px;
  --space-7:   80px;
  --space-8:   96px;
  --space-9:   128px;
  --space-10:  160px;
  --space-11:  200px;

  /* Fluid section padding — breathes with the viewport */
  --section-pad-y:    clamp(80px, 10vw, 160px);
  --section-pad-x:    clamp(24px, 6vw,  120px);
  --content-max:      1200px;
  --content-wide:     1440px;
  --content-narrow:   760px;

  /* ── Line Weights ────────────────────────────────────── */
  --rule-hairline:  0.5px;
  --rule-thin:      1px;
  --rule-accent:    2px;
  --rule-heavy:     4px;

  /* ── Transitions ─────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:  cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    200ms;
  --duration-base:    400ms;
  --duration-slow:    700ms;
  --duration-story:   900ms;

  /* ── Nav ─────────────────────────────────────────────── */
  --nav-height:  64px;

  /* ── Z-index ─────────────────────────────────────────── */
  --z-base:     1;
  --z-overlay:  10;
  --z-nav:      100;
  --z-modal:    1000;

}

/* ── Dark-surface override (used in select sections) ── */
[data-theme="dark"] {
  --color-bg:         var(--ink);
  --color-text:       var(--white);
  --color-text-soft:  var(--stone-200);
  --color-text-muted: var(--stone-500);
  --color-border:     var(--stone-800);
  --color-surface:    #2A2927;
}