/* ===================================================================
   Design tokens — extracted from the Figma Foundation file.
   Nothing else in the theme hard-codes a colour or a font size.
   Change a value here and it changes everywhere.
   =================================================================== */

:root {
  /* --- surfaces ------------------------------------------------- */
  --c-page:          #FCFCFC;  /* the page itself                     */
  --c-bg:            #F0F1F2;  /* light bands, and text on dark       */
  --c-surface:       #FCFCFC;  /* cards, button labels                */
  --c-btn-grey:      #6B6E76;  /* filled button on light sections     */
  --c-btn-line:      #3B3D42;
  --c-btn-pale: #F0F1F2;      /* inner-page hero button fill */
  --c-btn-pale-ink: #3B3D42;  /* and its label */  /* outlined button border              */
  --c-dark:          #212121;  /* stats band                          */
  --c-dark-soft:     #292A2E;  /* 360° section, footer                */

  /* --- text ----------------------------------------------------- */
  --c-ink:           #1E1F21;  /* primary headings                    */
  --c-ink-warm:      #1E1A16;  /* headings on warm sections           */
  --c-heading-grey:  #3B3D42;  /* section headings                    */
  --c-body:          #6B6E76;  /* body copy                           */
  --c-body-warm:     #706761;  /* body copy, warm sections            */
  --c-muted:         #7D818A;  /* eyebrow labels                      */
  --c-muted-light:   #BDBDBD;  /* eyebrow on dark                     */
  --c-on-dark:       #DDDEE1;  /* body copy on dark                   */
  --c-on-dark-soft:  #B7B9BE;  /* footer labels                       */
  --c-line:          #DDDEE1;  /* borders                             */
  --c-warm-tint:     #F1EEE9;  /* photo placeholder, process cards    */
  --c-panel-rose:    #E5DBDF;  /* the light panel on a photo band     */
  --c-warm-line:     #E1DDD8;  /* rule beside the step number         */

  /* --- accent --------------------------------------------------- */
  --c-accent:        #6B1D2B;  /* burgundy — step numbers, focus      */
  --c-accent-deep:   #500F28;  /* the submit button                   */
  --c-field-line:    #B7B9BE;  /* input borders                       */

  /* --- type ------------------------------------------------------
     Read out of the Figma file, not assumed. Every text node in the
     design is one of exactly four combinations:

       PP Editorial Old   400   headings
       PP Editorial Old   800   the biggest headings
       Plus Jakarta Sans  400   body copy
       Plus Jakarta Sans  500   labels, nav, buttons

     There is not a single Quiche Sans or SF Pro node anywhere in the
     file, yet those were the two families here from the first build. So
     every line of type on the site has been rendering in the wrong face.

     Plus Jakarta Sans is bundled (open licence). PP Editorial Old is a
     commercial face and is NOT - see fonts.css. Its fallback is a serif
     stack rather than the body font, so headings still read as a
     different voice while we wait for the licensed files.           ----- */
  --font-display: "PP Editorial Old", "Playfair Display", Georgia,
                  "Times New Roman", serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", system-ui, sans-serif;

  /* font sizes / line heights, straight from the design ---------- */
  --fs-12: 12px;  --lh-12: 18px;
  --fs-14: 14px;  --lh-14: 22px;
  --fs-16: 16px;  --lh-16: 24px;
  --fs-18: 18px;  --lh-18: 28px;
  --fs-20: 20px;  --lh-20: 30px;   /* section titles on the 390 frame */
  --fs-24: 24px;  --lh-24: 36px;
  --fs-28: 28px;  --lh-28: 42px;
  --fs-32: 32px;  --lh-32: 42px;
  --fs-40: 40px;  --lh-40: 52px;

  --fw-regular: 400;
  --fw-medium:  500;   /* the design's value. Was 510 - an SF Pro optical
                          weight that no longer applies, and Plus Jakarta Sans
                          renders it visibly heavier than the frames do. */
  --fw-bold:    700;
  --fw-black:   800;

  /* --- layout ---------------------------------------------------- */
  --page-max:    1440px;
  --pad-80:      80px;
  --pad-160:    160px;
  --pad-200:    200px;
  --sec-y:      100px;  /* default vertical section padding */

  --radius-sm:    4px;
  --radius-md:    8px;

  --ease:        cubic-bezier(.22, .61, .36, 1);
  --dur:         .45s;
}

/* Desktop-first design (1440). These breakpoints step down to the
   390px mobile frames that also exist in the Figma file. */
@media (max-width: 1200px) {
  :root { --pad-200: 48px; --pad-160: 48px; --pad-80: 40px; --sec-y: 72px; }
}
/* The 390 frames use a fixed set of steps rather than a scaled-down desktop
   one: 12/18 · 14/22 · 16/24 · 20/30 · 24/36 · 28/42 · 32/42. Where a step
   exists at both widths the token keeps its value and the selector picks a
   different step on mobile (see the type block at the end of layout.css) -
   that is the only way to express "this heading is 20 here and 24 there"
   without a token meaning two things.

   --fs-28 used to become 24/32 here, which is why the Bespoke hero rendered
   24px however specific its rule was: the rule won, the token under it was
   wrong. --lh-40 was 40 against the frame's 42 on the numbers band. */
@media (max-width: 720px) {
  :root {
    --pad-200: 20px; --pad-160: 20px; --pad-80: 20px; --sec-y: 56px;
    --fs-32: 26px;  --lh-32: 34px;
    --fs-40: 32px;  --lh-40: 42px;
  }
}

/* ===================================================================
   VERY WIDE SCREENS

   The design is drawn at 1440 and --page-max held every contained section
   to exactly that. On Milad's 3822px-wide display that leaves 1191px of
   empty page either side of every band and the site reads as a narrow strip
   floating in the middle.

   The frames only tell us about 390 and 1440, so above 1440 this is our
   judgement: let the measure grow with the viewport but slowly, and stop.
   The gutters grow with it so the proportion of the 1440 frame - content
   inset 160 of 1440, i.e. 11% - is what is preserved, not the pixel value.

   Full-bleed bands (hero, the numbers, the 360, the newsletter) are not
   affected: they were never inside .container.
   =================================================================== */
@media (min-width: 1600px) {
  :root {
    --page-max: 1760px;
    --pad-200: 13.9%;   /* 200 / 1440 */
    --pad-160: 11.1%;   /* 160 / 1440 */
    --pad-80:  5.6%;    /*  80 / 1440 */
  }
}
@media (min-width: 2200px) {
  :root { --page-max: 1920px; }
}