/* ============================================================
   Co. Defined — Site 2026-07 Fable — Design Tokens
   Palette carried over EXACTLY from the May build (source of
   truth) — the colors Laurie is known for. Do not deviate.
   Type: Fraunces (editorial serif) + Instrument Sans (quiet
   grotesque) + Spline Sans Mono (record labels) + Poppins
   (the CO. DEFINED wordmark — never restyled).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400;1,9..144,500&family=Instrument+Sans:ital,wght@0,400;0,500;1,400&family=Spline+Sans+Mono:wght@400;500&family=Poppins:wght@200;300&display=swap');

:root {

  /* ------------------------------------------------------------
     COLOR — kept exactly. Gold is the evidential accent;
     coral is the ACTION color ("Request a private call") only.
     ------------------------------------------------------------ */

  --cd-deep-forest:      #2F3A2E;
  --cd-forest-deep:      #262F25;
  --cd-forest-deeper:    #1E2620;   /* one further step — hero floor */
  --cd-deep-navy:        #354B60;
  --cd-navy-deep:        #2B3E50;
  --cd-deep-ink:         #2B2F36;
  --cd-warm-cream:       #F7F4EF;
  --cd-warm-cream-soft:  #FBF9F4;
  --cd-cool-neutral:     #7A8EA0;
  --cd-antique-gold:     #B89A6B;
  --cd-gold-bright:      #C9AB7C;

  --cd-coral-pop:        #E8814A;
  --cd-coral-60:         rgba(232, 129, 74, 0.65);

  /* tints & hairlines */
  --cd-ink-16:           rgba(43, 47, 54, 0.16);
  --cd-ink-10:           rgba(43, 47, 54, 0.10);
  --cd-ink-06:           rgba(43, 47, 54, 0.06);
  --cd-cream-20:         rgba(247, 244, 239, 0.20);
  --cd-cream-14:         rgba(247, 244, 239, 0.14);
  --cd-cream-08:         rgba(247, 244, 239, 0.08);
  --cd-gold-60:          rgba(184, 154, 107, 0.60);
  --cd-gold-45:          rgba(184, 154, 107, 0.45);
  --cd-gold-25:          rgba(184, 154, 107, 0.25);
  --cd-gold-12:          rgba(184, 154, 107, 0.12);
  --cd-forest-veil:      rgba(38, 47, 37, 0.74);

  /* semantic roles */
  --bg:                  var(--cd-warm-cream);
  --bg-soft:             var(--cd-warm-cream-soft);
  --bg-deep:             var(--cd-deep-forest);
  --fg:                  var(--cd-deep-ink);
  --fg-muted:            #6B7280;
  --fg-on-deep:          var(--cd-warm-cream);
  --fg-on-deep-muted:    rgba(247, 244, 239, 0.62);
  --accent:              var(--cd-antique-gold);
  --accent-on-deep:      var(--cd-gold-bright);
  --rule:                var(--cd-ink-16);
  --rule-soft:           var(--cd-ink-10);
  --rule-on-deep:        var(--cd-cream-14);

  /* ------------------------------------------------------------
     TYPE
     ------------------------------------------------------------ */
  --serif:    'Fraunces', 'Georgia', serif;
  --sans:     'Instrument Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --mono:     'Spline Sans Mono', 'SF Mono', monospace;
  --wordmark: 'Poppins', var(--sans);   /* the CO. DEFINED logo face — do not restyle */

  --fs-hero:     clamp(2.6rem, 8.8vw, 6.2rem);
  --fs-h2:       clamp(2.1rem, 5.4vw, 4rem);
  --fs-sect:     clamp(1.6rem, 3.6vw, 2.7rem);   /* section titles - calm register */
  --fs-h3:       clamp(1.35rem, 2.6vw, 1.8rem);
  --fs-feature:  clamp(1.4rem, 3.2vw, 2.3rem);
  --fs-monu:     clamp(1.6rem, 4vw, 2.9rem);      /* monumental list lines */
  --fs-lede:     clamp(1.08rem, 1.6vw, 1.32rem);
  --fs-body:     clamp(1rem, 1.2vw, 1.125rem);
  --fs-small:    0.9rem;
  --fs-label:    clamp(0.66rem, 1vw, 0.74rem);

  --lh-tight:    1.05;
  --lh-heading:  1.14;
  --lh-body:     1.72;

  --track-label: 0.24em;

  /* ------------------------------------------------------------
     SPACE & SHAPE
     ------------------------------------------------------------ */
  --stage:       1200px;
  --stage-text:  760px;
  --gutter:      clamp(1.35rem, 4.5vw, 3.5rem);
  --sect-y:      clamp(5.5rem, 13vw, 11rem);
  --sect-y-sm:   clamp(3.5rem, 8vw, 6.5rem);

  --radius-plate: clamp(10px, 1.6vw, 18px);
  --radius-card:  8px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press:  cubic-bezier(0.34, 1.4, 0.64, 1);
}