/* ==========================================================================
   GENERATED FILE — do not hand-edit.
   Source of truth: src/_data/tokens.json (DTCG-style $value/$type).
   Rendered at build time by this Nunjucks template into plain CSS custom
   properties on :root. Regenerate by running the Eleventy build — editing
   this file directly will be overwritten on the next `npm run build`.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Primitive color tokens (raw values, named by what they are)
     ------------------------------------------------------------------------ */
  --color-ink:            #031926;
  --color-ink-2:          #0A2635;
  --color-teal:           #468189;
  --color-teal-deep:      #2C656B;
  --color-teal-muted:     #77ACA2;
  --color-ash:            #9DBEBB;
  --color-faint:          #7E9A98;
  --color-chrome:         #4C6168;
  --color-paper:          #F4E9CD;
  --color-paper-2:        #EFE2C4;
  --color-line:           #E3D8BC;
  --color-line-strong:    #C9B98E;
  --color-terracotta:     #C2553F;
  --color-terracotta-ink: #A8442F;
  --color-white:          #FFFFFF;
  --color-ink-line:       #5A6D6B;

  /* ------------------------------------------------------------------------
     Semantic color tokens — light sections (on paper)
     ------------------------------------------------------------------------ */
  --color-surface:        var(--color-paper);
  --color-surface-alt:    var(--color-paper-2);
  --color-text:           var(--color-ink);
  --color-text-secondary: var(--color-chrome);
  --color-border:         var(--color-line);
  --color-border-strong:  var(--color-line-strong);
  --color-accent:         var(--color-teal);
  --color-accent-strong:  var(--color-teal-deep);
  --color-focus:          var(--color-teal-deep);
  --color-spark:          var(--color-terracotta-ink);
  --color-spark-large:    var(--color-terracotta);
  --color-error:          var(--color-terracotta-ink);

  /* ------------------------------------------------------------------------
     Semantic color tokens — dark sections (on ink: hero, footer)
     ------------------------------------------------------------------------ */
  --color-surface-inv:        var(--color-ink);
  --color-surface-inv-raised: var(--color-ink-2);
  --color-text-inv:           var(--color-paper);
  --color-text-inv-secondary: var(--color-teal-muted);
  --color-text-inv-eyebrow:   var(--color-ash);
  --color-border-inv:         var(--color-ink-line);
  --color-accent-inv:         var(--color-ash);
  --color-focus-inv:          var(--color-terracotta-ink);

  /* ------------------------------------------------------------------------
     Legacy --wf-* aliases — kept so the wireframe markup needs zero class
     churn for this visual pass. Names are "inert" (wireframe-era), values
     now point at the real design-token system above.
     ------------------------------------------------------------------------ */
  --wf-ink:        var(--color-text);
  --wf-ink-muted:  var(--color-text-secondary);
  --wf-ink-subtle: var(--color-text-secondary);
  --wf-line:       var(--color-border-strong);
  --wf-line-soft:  var(--color-border);
  --wf-surface:    var(--color-surface);
  --wf-surface-2:  var(--color-surface-alt);
  --wf-focus:      var(--color-focus);

  /* Layout tokens — unchanged from the wireframe pass */
  --wf-container-max: 72rem;
  --wf-container-pad: 1rem;
  --wf-container-pad-lg: 2rem;
  --wf-bp-md: 48rem;  /* 768px */
  --wf-bp-lg: 64rem;  /* 1024px */

  /* Spacing scale — unchanged from the wireframe pass */
  --wf-space-0: 0;
  --wf-space-1: 0.25rem;
  --wf-space-2: 0.5rem;
  --wf-space-3: 1rem;
  --wf-space-4: 1.5rem;
  --wf-space-5: 2rem;
  --wf-space-6: 3rem;
  --wf-space-7: 4rem;
  --wf-measure: 66ch;

  /* ------------------------------------------------------------------------
     Type — Roboto, four weights, tight tracking on display
     ------------------------------------------------------------------------ */
  --font-sans: "Roboto", "Roboto-fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --font-display:  clamp(2.5rem, 5vw, 3.75rem);
  --font-h1:       clamp(2rem, 3.5vw, 2.75rem);
  --font-h2:       1.75rem;
  --font-h3:       1.25rem;
  --font-body-lg:  1.125rem;
  --font-body:     1rem;
  --font-small:    0.9375rem;
  --font-eyebrow:  0.75rem;

  /* legacy alias — the wireframe used a single system-font stack */
  --wf-font: var(--font-sans);
  --wf-text-base: var(--font-body);
  --wf-text-lh: 1.6;

  /* ------------------------------------------------------------------------
     Radii
     ------------------------------------------------------------------------ */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------------
     Shadows — soft, large, ink-tinted
     ------------------------------------------------------------------------ */
  --shadow-sm:    0 2px 8px rgba(3,25,38,0.06);
  --shadow-md:    0 8px 20px rgba(3,25,38,0.08);
  --shadow-lg:    0 14px 30px rgba(3,25,38,0.10);
  --shadow-hover: 0 18px 36px rgba(3,25,38,0.14);

  /* ------------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------------ */
  --motion-fast:  120ms;
  --motion-base:  200ms;
  --motion-slow:  250ms;
  --ease-out:     cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
}