/* ============================================================
   Dr. Mark McKelvie — design tokens
   Values here are MEASURED off the two reference sites, not chosen by eye.
   Sources are named per block so the next person can re-verify.
   ============================================================ */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/CormorantGaramond-VF.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/Jost-VF.ttf") format("truetype-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Warm neutral SCALE ------------------------------------------------
     Floema names its neutrals in scales (brightIvory 25→400, stoneBrown
     100→800) rather than three flat greys. The client-approved five colours
     are kept at their exact values and marked; the rest interpolate between
     them so the page has real tonal depth instead of two flat fills.        */
  --ivory-25:   #FAF8F4;
  --ivory-50:   #F5F1EA;  /* CLIENT-APPROVED — background            */
  --ivory-100:  #EDE7DC;
  --ivory-200:  #E2D8C9;
  --ivory-300:  #D8C9B8;  /* CLIENT-APPROVED — secondary background  */
  --ivory-400:  #C0B0A0;

  --stone-500:  #9A8065;  /* CLIENT-APPROVED — warm accent (bronze)  */
  --stone-600:  #6B655F;  /* CLIENT-APPROVED #746E68, darkened for AA  */
  --stone-700:  #5A544E;
  --bronze-txt: #82684F;  /* the accent, made safe to set type in     */

  /* Use the darker secondary colours for small text; reserve the lighter
     accent for large display type and decorative details. */

  --ink-800:    #3A3733;
  --ink-900:    #22201E;  /* CLIENT-APPROVED — text                  */

  /* --- The cool counterpoint --------------------------------------------
     Required: the approved palette is entirely warm, which is the single
     thing most likely to make it read flat and generated. Georgie's runs a
     teal SCALE (#006B70, #0B6A70, #0798A5) rather than one flat teal, so
     this does the same. Navy is lifted straight out of the approved logo
     (drmark-lockup-primary.svg), so it is not an invention.                 */
  --teal-700:   #14383B;
  --teal-600:   #1C4A4D;
  --teal-500:   #206468;
  --teal-400:   #2E7F80;
  --navy-900:   #0F1E2D;  /* FROM THE APPROVED LOGO — ink navy       */
  --stone-logo: #C8B7A6;  /* FROM THE APPROVED LOGO — warm stone     */

  /* Lighter accents for text and labels placed over photographs. */
  --teal-onphoto:   #8FC7C6;
  /* Use the primary navy over the pale studio background. */
  --bronze-onphoto: #D3B183;

  /* --- Fluid scale ------------------------------------------------------
     Floema's exact clamp form: clamp(min, minPx + 100vw * slope, max).
     Linear interpolation written in px + vw, not a bare vw value — it keeps
     a real floor and ceiling instead of collapsing at the extremes.          */
  --fs-micro:   clamp(10px, 9.41px + 100vw * .0015, 12px);
  --fs-small:   clamp(12px, 10.83px + 100vw * .003, 16px);
  --fs-body:    clamp(15px, 13.83px + 100vw * .003, 19px);
  --fs-lead:    clamp(19px, 15.49px + 100vw * .009, 31px);
  --fs-h3:      clamp(24px, 20.49px + 100vw * .009, 36px);
  --fs-h2:      clamp(34px, 25.22px + 100vw * .0225, 64px);
  --fs-display: clamp(46px, 19.25px + 100vw * .0686, 118px);

  /* --- Tracking ---------------------------------------------------------
     Measured, both sites agree on the shape of the rule:
       Floema  display  53px → -2.1344px  = -0.0403em   (constant -0.04em)
       Georgie display 217.6px → -17.408px = -0.080em
               display 112.6px →  -5.069px = -0.045em
       Georgie micro-labels  ~13px → +3.4px = +0.26em
     So: display goes TIGHT and gets tighter as it grows; small uppercase
     labels go WIDE. That contrast is the editorial engine. Generic AI pages
     leave both at 0 and that is exactly why they look inert.                 */
  --track-display: -0.055em;
  --track-h2:      -0.04em;
  --track-h3:      -0.03em;
  --track-body:    -0.011em;
  --track-label:    0.24em;

  /* --- Leading ----------------------------------------------------------
     Georgie's display leading is SUB-1: 178.4/217.6 = 0.82, 170.5/230.4 =
     0.74. Floema at mid sizes sits at ~1.06. Generic pages use 1.2+ on
     headings, which is the tell.                                            */
  --lh-display: 0.86;
  --lh-h2:      0.98;
  --lh-h3:      1.12;
  --lh-body:    1.62;
  --lh-lead:    1.42;

  /* --- 24-column grid ---------------------------------------------------
     Floema, read off its live custom properties:
       --grid-columns: 24
       --grid-gap:     clamp(14px, 9.71px + 100vw * .011, 28px)
       --grid-width:   calc(100vw - clamp(16px,10.15px + 100vw*.015,36px)*2)
     24 columns, not 12 — that is what makes 7/17 and 5/19 splits expressible.
     A 12-column grid can only really do halves, thirds and quarters, which
     is why 12-col pages drift toward symmetry.                              */
  --grid-columns: 24;
  --grid-gap:     clamp(14px, 9.71px + 100vw * .011, 28px);
  --grid-margin:  clamp(20px, 10.15px + 100vw * .028, 72px);
  --grid-width:   calc(100% - var(--grid-margin) * 2);

  /* Shared motion curves and transition durations. */
  --ease-expo: cubic-bezier(.5, .02, .28, 1);
  --ease-circ: cubic-bezier(.45, .05, .3, 1);
  --dur-fast:  .4s;
  --dur-mid:   .62s;
  --dur-slow:  .9s;
  --dur-xslow: 1s;

  /* --- Vertical rhythm --------------------------------------------------- */
  --section-y: clamp(80px, 47.9px + 100vw * .0835, 190px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-mid: 1ms; --dur-slow: 1ms; --dur-xslow: 1ms; }
}