/* =============================================================================
   tokens.css — HumanTrace Redesign v0.5
   Load order: tokens.css FIRST, base.css SECOND.

   LAYER 1  RAW INPUTS          The only values to change per iteration.
   LAYER 2  COLOUR SCALES        Derived — do not edit directly.
   LAYER 3  SEMANTIC ALIASES     All components reference these only.
   LAYER 4  TYPOGRAPHY           Font stacks + type scale.
   LAYER 5  SPACING              Fluid space scale.
   LAYER 6  LAYOUT               Containers, breakpoints, radii.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400;1,8..60,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');


/* ═══════════════════════════════════════════════════════════════════════
   LAYER 1 — RAW INPUTS
   Change these; everything below cascades automatically.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --input-espresso:  #1B1008;   /* primary dark — warm charcoal-brown    */
  --input-parchment: #F5EFE5;   /* primary light — warm off-white        */
  --input-linen:     #EDE3D2;   /* secondary light — warm linen */
  --input-amber:     #C17A28;   /* accent — warm amber-gold              */
  --input-night:     #0E2214;   /* deep dark — forest green (Bonfires / footer) */
}


/* ═══════════════════════════════════════════════════════════════════════
   LAYER 2 — COLOUR SCALES
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Espresso scale */
  --espresso:       var(--input-espresso);
  --espresso-mid:   color-mix(in srgb, var(--input-espresso) 88%, var(--input-parchment));

  /* Parchment scale */
  --parchment:      var(--input-parchment);
  --parchment-mid:  var(--input-linen);
  --parchment-deep: color-mix(in srgb, var(--input-parchment) 72%, var(--input-espresso));

  /* Amber scale */
  --amber:          var(--input-amber);
  --amber-soft:     color-mix(in srgb, var(--input-amber) 68%, transparent);
  --amber-warm:     color-mix(in srgb, var(--input-amber) 85%, white);

  /* Night (forest green) scale */
  --night:          var(--input-night);
  --night-mid:      color-mix(in srgb, var(--input-night) 88%, var(--input-parchment));
  --night-text:     color-mix(in srgb, var(--input-parchment) 94%, var(--input-night));
  --night-muted:    color-mix(in srgb, var(--input-parchment) 50%, transparent);
  --night-whisper:  color-mix(in srgb, var(--input-parchment) 24%, transparent);
  --night-rule:     color-mix(in srgb, var(--input-parchment)  8%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════════
   LAYER 3 — SEMANTIC ALIASES
   Components reference these. Never reference Layer 2 directly.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --color-bg:           var(--parchment);
  --color-bg-alt:       var(--parchment-mid);
  --color-bg-dark:      var(--night);

  /* Text — light backgrounds */
  --color-text:         var(--espresso);
  --color-text-soft:    rgba(26, 18, 9, 0.60);
  --color-text-muted:   rgba(26, 18, 9, 0.38);
  --color-text-whisper: rgba(26, 18, 9, 0.20);

  /* Text — dark backgrounds */
  --color-text-on-dark:        var(--night-text);
  --color-text-on-dark-soft:   var(--night-muted);
  --color-text-on-dark-whisper:var(--night-whisper);

  /* Borders */
  --color-rule:         rgba(26, 18, 9, 0.10);
  --color-rule-strong:  rgba(26, 18, 9, 1.00);
  --color-rule-dark:    var(--night-rule);

  /* Accent */
  --color-accent:       var(--amber);
  --color-accent-soft:  var(--amber-soft);

  /* CTA defaults (overridden per context in components) */
  --color-cta-bg:   var(--espresso);
  --color-cta-text: var(--parchment);
}


/* ═══════════════════════════════════════════════════════════════════════
   LAYER 4 — TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Font stacks */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Weights */
  --weight-display:        400;
  --weight-display-medium: 600;
  --weight-body:           300;
  --weight-body-medium:    500;

  /* ── Type scale ──────────────────────────────────────────────────────
     Each step is guaranteed larger than the previous at every viewport.
     Calculated at 1280px | 1920px to verify no overlap:

     label   0.74rem  | 0.78rem
     small   0.88rem  | 0.93rem
     body    1.01rem  | 1.10rem
     anchor  1.08rem  | 1.30rem   ← lead-in text, slightly bigger than body
     phrase  2.20rem  | 3.50rem   ← cycling quotes (medium presence)
     h3      1.50rem  | 1.72rem
     h2      1.90rem  | 2.40rem
     h1      2.30rem  | 3.40rem
     display 2.80rem  | 4.50rem
     diagnosis 3.80rem | 5.50rem  ← always larger than phrase
     cover   1.56rem  | 2.20rem   ← italic caption under cover photo
     ─────────────────────────────────────────────────────────────────── */

  --text-label:     clamp(0.68rem, 0.15vw + 0.62rem, 0.78rem);
  --text-small:     clamp(0.82rem, 0.22vw + 0.75rem, 0.94rem);
  --text-body:      clamp(0.94rem, 0.30vw + 0.87rem, 1.10rem);
  --text-anchor:    clamp(0.95rem, 0.80vw + 0.50rem, 1.30rem);
  --text-phrase:    clamp(1.90rem, 2.80vw + 0.40rem, 3.50rem);
  --text-h3:        clamp(1.20rem, 1.10vw + 0.78rem, 1.72rem);
  --text-h2:        clamp(1.50rem, 1.90vw + 0.60rem, 2.40rem);
  --text-h1:        clamp(1.90rem, 2.80vw + 0.70rem, 3.40rem);
  --text-display:   clamp(2.30rem, 4.20vw + 0.40rem, 4.50rem);
  --text-diagnosis: clamp(2.80rem, 4.20vw + 0.50rem, 5.50rem);
  --text-cover:     clamp(2.20rem, 4.00vw + 0.60rem, 5.00rem);  /* cover tagline — hero statement */

  /* Shared metrics */
  --leading-tight:   1.02;
  --leading-heading: 1.08;
  --leading-body:    1.72;
  --tracking-tight:  -0.028em;
  --tracking-heading:-0.022em;
  --tracking-label:   0.12em;
  --tracking-button:  0.06em;
}


/* ═══════════════════════════════════════════════════════════════════════
   LAYER 5 — SPACING
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --space-xs:   clamp(0.40rem, 0.40vw + 0.26rem, 0.65rem);
  --space-sm:   clamp(0.75rem, 0.75vw + 0.44rem, 1.18rem);
  --space-md:   clamp(1.00rem, 1.40vw + 0.52rem, 1.85rem);
  --space-lg:   clamp(1.50rem, 2.30vw + 0.70rem, 2.90rem);
  --space-xl:   clamp(2.40rem, 4.00vw + 0.85rem, 5.20rem);
  --space-2xl:  clamp(4.00rem, 6.50vw + 1.20rem, 9.00rem);
  --space-3xl:  clamp(6.00rem, 9.00vw + 1.50rem, 12.00rem);

  --section-pad: clamp(5.50rem, 10.00vw, 11.00rem);
  --section-sm:  clamp(3.50rem,  6.00vw,  6.50rem);
}


/* ═══════════════════════════════════════════════════════════════════════
   LAYER 6 — LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --page-pad:  clamp(1.25rem, 5.50vw, 6.00rem);
  --max-width: 1280px;

  --radius-sm:   0.25rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.10rem;
  --radius-full: 9999px;
}