/* ============================================================
   TRELLIS STACK · DESIGN TOKENS
   Single source of truth. Sections must not redefine these.
   ============================================================ */

:root {
  /* ---- Core palette (from the approved brand book) -------- */
  --t-cream:    #F4F1EA;   /* page base — warm paper           */
  --t-cream-2:  #ECE7DC;   /* subtle surface step              */
  --t-cream-3:  #DED6C4;   /* borders on cream                 */
  --t-white:    #FFFFFF;   /* cards on cream                   */

  --t-ink:      #1D1D1B;   /* charcoal — near-black            */
  --t-ink-2:    #322E28;   /* secondary dark surface           */

  --t-forest:   #2F3D2E;   /* forest green — the dark register */
  --t-forest-2: #263125;   /* deeper forest, for panels-on-dark*/
  --t-sage:     #6B7F64;   /* sage — links, accents            */
  --t-sage-lt:  #A6B79A;   /* soft sage                        */
  --t-rose:     #B76A74;   /* dusty rose — the warm signal      */
  /* The same rose, darkened until it works as INK or as a fill behind light
     ink. #B76A74 is only 3.94:1 on white and 3.49:1 under cream, so numerals,
     initials and small labels painted in the decorative rose were unreadable.
     This is 5.79:1 on white and 5.13:1 under cream. Decorative rose stays for
     large fills and rules; anything carrying text uses this. */
  --t-rose-ink: #91545C;
  --t-blush:    #D8B4BE;   /* soft blush                       */

  /* ---- Semantic -------------------------------------------- */
  --bg:            var(--t-cream);
  --surface:       var(--t-white);
  --surface-sunk:  var(--t-cream-2);
  --border:        rgba(29, 29, 27, 0.11);
  --border-strong: rgba(29, 29, 27, 0.20);

  --text:      var(--t-ink);
  --text-2:    rgba(29, 29, 27, 0.66);   /* 5.02:1 on the darkest cream — ok  */
  /* WAS 0.44, which is 2.69:1 on cream — every eyebrow label on the site sat
     below the WCAG AA 4.5:1 bar, and eyebrows are how each section announces
     itself. 0.63 gives 4.71:1 on cream and 4.59:1 on the darkest tint the
     site paints, so one value is safe on every light surface. Muted is a
     TONE, not an excuse to be unreadable. */
  --text-3:    rgba(29, 29, 27, 0.63);

  --accent:      var(--t-rose);
  --accent-cool: var(--t-sage);

  /* On dark (forest) sections */
  --on-dark:    #F4F1EA;
  --on-dark-2:  rgba(244, 241, 234, 0.68);  /* 5.66:1 on forest — ok */
  /* WAS 0.42 = 3.19:1 on forest: the footer's own tagline and column titles. */
  --on-dark-3:  rgba(244, 241, 234, 0.63);   /* 5.10:1 — 0.57 landed on 4.50, inside the bar's rounding */
  --border-dark: rgba(244, 241, 234, 0.16);

  /* ---- Type -------------------------------------------------
     Cormorant Garamond used with restraint: display sizes only.
     Inter carries everything that needs to be read at length.  */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-hero:  clamp(2.75rem, 6.6vw, 5.6rem);
  --t-d1:    clamp(2.15rem, 4.6vw, 3.75rem);
  --t-d2:    clamp(1.7rem,  3.2vw, 2.6rem);
  --t-d3:    clamp(1.35rem, 2.1vw, 1.75rem);

  --t-lead:  clamp(1.05rem, 1.4vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;
  --t-label: 0.6875rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.65;

  --tracking-label: 0.15em;

  /* ---- Space / rhythm --------------------------------------- */
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --maxw:      1220px;
  --maxw-text: min(58ch, 100%);
  --section-y: clamp(5rem, 10vw, 9.5rem);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  /* Arch radius — the brand's signature top-rounded shape,
     used on cards, image frames, and dividers. Not a generic
     border-radius: it is the logo's own arch proportion. */
  --r-arch: 120px 120px 14px 14px;

  /* ---- Elevation ---------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(29,29,27,.05), 0 2px 8px rgba(29,29,27,.04);
  --sh-md: 0 2px 6px rgba(29,29,27,.05), 0 14px 32px rgba(29,29,27,.08);
  --sh-lg: 0 4px 14px rgba(29,29,27,.06), 0 30px 64px rgba(29,29,27,.11);

  /* ---- Motion --------------------------------------------------- */
  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --dur-fast:   180ms;
  --dur:        340ms;
  --dur-slow:   760ms;

  /* ---- Signature gradients -------------------------------------- */
  --grad-canopy: radial-gradient(58% 58% at 28% 22%, #A6B79A 0%, transparent 70%),
                 radial-gradient(52% 52% at 78% 38%, #D8B4BE 0%, transparent 72%),
                 radial-gradient(66% 66% at 50% 88%, #2F3D2E 0%, transparent 76%);
  --grad-rose:   linear-gradient(150deg, #D8B4BE 0%, #B76A74 55%, #6B4650 100%);
  --grad-forest: linear-gradient(155deg, #6B7F64 0%, #2F3D2E 55%, #1D1D1B 100%);
}

/* Dark sections opt in by class — a deliberate light/dark
   editorial rhythm down the page, not a media query. */
.on-dark {
  --bg:            var(--t-forest);
  --surface:       var(--t-forest-2);
  --surface-sunk:  #202A1F;
  --border:        var(--border-dark);
  --border-strong: rgba(244, 241, 234, 0.26);
  --text:          var(--on-dark);
  --text-2:        var(--on-dark-2);
  --text-3:        var(--on-dark-3);
  /* Blush is 6.12:1 on forest as a large mark, but --text-3 labels sitting
     on it landed at 4.50 — inside rounding of the bar. Cream is unambiguous. */
  --accent:        var(--t-blush);
  color: var(--text);
  background: var(--bg);
}