/* ===========================================================================
   Seymour's Window Washing — design tokens
   Source of truth: assets/brand/brand-guideline-v6-2026-08-09.pdf (page 08)
   Values transcribed verbatim. If it isn't on page 08, it isn't in the brand.
   =========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------ */
  --sw-navy:          #0C1B36;   /* midnight */
  --sw-navy-deep:     #050E1F;
  --sw-navy-mid:      #1E3A6B;
  --sw-oxblood:       #9E1B32;
  --sw-oxblood-deep:  #6B2027;
  --sw-bronco:        #93BDD8;   /* sampled off the '70 Ford Bronco paint */
  --sw-bronco-pale:   #C6DCE9;
  --sw-bronco-tint:   #E4EDF4;
  --sw-rule:          #DFE4E8;
  --sw-ink:           #141414;
  --sw-slate:         #474C52;
  --sw-white:         #FFFFFF;
  /* Named in the page-08 alias note rather than the swatch list: muted text
     on navy is mist, because slate on navy measures 1.9:1. */
  --sw-mist:          #C3CFE0;

  /* --- Semantic aliases -------------------------------------------------- */
  --sw-surface:        var(--sw-white);
  --sw-surface-alt:    var(--sw-bronco-tint);
  --sw-surface-invert: var(--sw-navy);
  --sw-text:           var(--sw-ink);
  --sw-text-muted:     var(--sw-slate);
  --sw-text-invert:    var(--sw-white);
  --sw-accent:         var(--sw-oxblood);
  --sw-border:         var(--sw-rule);

  /* --- Type -------------------------------------------------------------- */
  --sw-font-display: "Jost", system-ui, sans-serif;
  --sw-font-ui:      "Jost", system-ui, sans-serif;
  --sw-weight-display: 300;      /* never bold */
  --sw-weight-body:    400;
  --sw-weight-dim:     300;
  --sw-track-display: 0.14em;
  --sw-track-eyebrow: 0.34em;
  --sw-track-label:   0.28em;
  --sw-leading-body:  1.75;

  /* --- Geometry ---------------------------------------------------------- */
  --sw-radius:        0;
  --sw-radius-glass:  48px;      /* 44–56px — glass panels only */
  --sw-shadow:        none;
  --sw-rule-hairline: 1px;
  --sw-rule-plaque:   3px;
  --sw-ease:          cubic-bezier(.16, .84, .24, 1);

  /* --- Space scale ------------------------------------------------------- */
  --sw-space-1: 4px;
  --sw-space-2: 8px;
  --sw-space-3: 12px;
  --sw-space-4: 16px;
  --sw-space-5: 24px;
  --sw-space-6: 32px;
  --sw-space-7: 48px;
  --sw-space-8: 64px;
  --sw-space-9: 80px;
  --sw-space-10: 104px;
  --sw-gutter-page: 40px;

  /* --- Derived, not in the guideline (build-time decisions) --------------
     The page is full width, LVMH-style: colored blocks are inset from the
     viewport by --sw-frame so the ground shows around them, and content runs
     the full width inside that with --sw-gutter-page. Reading measure is
     controlled per text block, not by a container. */
  /* Two separate numbers, and they were one until 2026-08-17.
     --sw-frame is the thin edge AROUND the whole site. --sw-gap is the seam
     BETWEEN blocks, where the window light shows through. Tying them together
     meant a classy thin border forced tight seams and vice versa. */
  --sw-frame: clamp(6px, 0.7vw, 12px);     /* the outer edge — thin on purpose */
  /* This moved four times on 2026-08-18, so the trail is worth keeping:
     clamp(40px, 7vw, 130px) originally, 0 when the sections became glass
     matching the solid header, 4px to put a hairline back, then var(--sw-frame)
     for an even gutter on all four sides, and now its own length again.

     The visible gap between blocks, carrying the ground and its lattice. Was
     tied to --sw-frame (a ~9px seam) until 2026-08-18; the air between sections
     lived inside the glass as padding instead, so the page read as one
     continuous surface and the ground never showed. Now the gap does the
     spacing and the glass hugs its content. */
  --sw-gap:   clamp(56px, 7vw, 104px);

  /* What is left of the internal padding after the air moved out to --sw-gap.
     Not zero on purpose: at zero the type sits flush against the edge of its
     own glass panel, which is the same complaint that closing the seams caused
     in the first place. This is the smallest band that keeps a heading off the
     edge. Set it to 0 if the panels should hug their content exactly. */
  --sw-band:  clamp(24px, 2.5vw, 36px);
  --sw-header-h: 88px;
  --sw-measure: 68ch;          /* body copy cap, so full width never hurts reading */
}

@media (max-width: 720px) {
  :root {
    --sw-gutter-page: 20px;
    --sw-radius-glass: 32px;
    --sw-header-h: 68px;
    --sw-frame: 6px;
  }
}

/* --- Type scale — web (guideline page 06) -------------------------------
   Hero          Jost 300 caps   52–64px  /1.10  0.14em
   Section title Jost 300 caps   34–40px  /1.12  0.14em
   Card title    Jost 400 caps   17–22px  /1.24  0.16em
   Body          Jost 400        16–17px  /1.75  0
   Eyebrow / nav Jost 500 caps    9–11px  /1.2   0.32–0.34em
   Button        Jost 500 caps    9–10px  /1     0.34em

   Light 300 is a display weight. Below 17px it goes fragile — small caps runs
   are 500 and small titles 400.

   Measured contrast on this palette (page 05 prints three stale values from
   the previous robin's-egg palette; these are the real ones):
     bronco #93BDD8 on white ........  2.0:1  → surface only, never a letterform
     navy on bronco blue ............  8.6:1
     navy on bronco tint ............ 14.5:1
     navy on white .................. 17.1:1
     slate on white .................  8.7:1
     slate on bronco tint ...........  7.3:1
     white on oxblood ...............  7.9:1
   ------------------------------------------------------------------------ */