/* ==========================================================================
   Tokens. Colour, glass, type, radius, shadow.
   Light ground, rust orange, frosted glass. The whole site reskins here.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Contrast, measured against WCAG 2.1 on the --bg ground:
       ink   on bg   16.87   AA
       rust  on bg    5.21   AA
       muted on bg    5.65   AA
       white on rust  5.56   AA
     Rust is safe as text and as a fill with white on it, which is what lets
     it carry both the headlines and the buttons. */

  --bg:         #F0EFEB;   /* neutral warm off-white */
  --bg-sink:    #F1EBE4;   /* very slightly deeper, for insets */
  --ink:        #1C1512;   /* warm near-black, all body and display text */
  --muted:      #6B615A;   /* secondary text */
  --rust:       #B7410E;   /* the accent, used sparingly */
  --rust-deep:  #9E3B12;   /* hover and pressed */
  --rust-soft:  #E7CEBC;   /* tinted fills, chips, quiet panels */
  --line:       rgba(28, 21, 18, 0.10);

  /* --- Glass -------------------------------------------------------------
     Three weights. Light for large panels that should almost disappear,
     regular for cards, heavy for the floating nav where legibility over
     moving content matters most. */

  --glass-light:   rgba(255, 255, 255, 0.44);
  --glass:         rgba(255, 255, 255, 0.58);
  --glass-heavy:   rgba(255, 255, 255, 0.72);
  --glass-tint:    rgba(183, 65, 14, 0.07);

  --blur:        saturate(175%) blur(20px);
  --blur-heavy:  saturate(180%) blur(28px);

  /* --- Shadow ------------------------------------------------------------
     Soft, layered, warm. Never a single hard drop. */
  --sh-sm:
    0 1px 2px rgba(28, 21, 18, 0.04),
    0 4px 12px rgba(28, 21, 18, 0.05);
  --sh-md:
    0 2px 4px rgba(28, 21, 18, 0.04),
    0 10px 28px rgba(28, 21, 18, 0.07);
  --sh-lg:
    0 4px 8px rgba(28, 21, 18, 0.04),
    0 20px 56px rgba(28, 21, 18, 0.10);

  /* --- Radius ------------------------------------------------------------
     Rounded throughout. Pills for anything pressable. */
  --r-pill: 999px;
  --r-xl:   32px;
  --r-lg:   24px;
  --r-md:   16px;
  --r-sm:   10px;

  /* --- Type --------------------------------------------------------------
     One family. Plus Jakarta Sans is a soft, slightly geometric grotesque
     that suits rounded shapes and a light ground without going novelty. */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          system-ui, Helvetica, Arial, sans-serif;

  /* The lockup only. A system serif, so nothing extra is downloaded. */
  --font-logo: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;

  --t-hero: clamp(2.75rem, 7.5vw, 5.5rem);
  --t-xxl:  clamp(2.25rem, 5.2vw, 3.75rem);
  --t-xl:   clamp(1.75rem, 3.4vw, 2.5rem);
  --t-lg:   clamp(1.25rem, 2.1vw, 1.5rem);
  --t-md:   clamp(1rem, 1.3vw, 1.0625rem);
  --t-base: 1rem;
  --t-sm:   0.875rem;
  --t-xs:   0.78125rem;

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.6;

  --tr-tight: -0.032em;   /* display sizes */
  --tr-snug:  -0.018em;
  --tr-label:  0.08em;    /* small caps labels */

  /* --- Space -------------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.5rem;   --s-6: 2rem;
  --s-7: 3rem;     --s-8: 4rem;     --s-9: 6rem;

  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --gutter:    clamp(1rem, 4vw, 2.5rem);
  --measure:   58ch;
  --maxw:      75rem;

  --nav-h:   4rem;
  --nav-gap: 0.875rem;   /* how far the floating bar sits off the top */

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  620ms;
}