/* ============================================================
   TVMK design tokens
   Palette sampled from Wil's own photographs and the award seal:
   travertine plaster, TV-bezel ink, brass from the Consumer Choice
   badge, and the charcoal accent walls he mounts onto.
   ============================================================ */
:root {
  /* ---- colour ---- */
  --ink:          #0E0E10;
  --ink-2:        #16171A;
  --ink-3:        #212328;
  --plaster:      #F5F2ED;
  --plaster-2:    #EAE5DC;
  --plaster-3:    #DCD5C8;
  /* ---- gold ----
     Ported from the Cleverstack portfolio's three-stop scale so the two sites
     read as one designer's work. Two rules govern which one you reach for:

       dark surfaces  -> the .gold-text GRADIENT (gold-1 -> gold-2 -> gold-1)
       light surfaces -> SOLID --gold-3, never the gradient

     Gradient-clipped text on plaster goes muddy and loses contrast, which is
     why the portfolio does the same thing (see its Eyebrow component).

     --gold-3 is DARKER than the portfolio's #8a6d1f on purpose. Measured against
     TVMK's two light grounds it only reached 4.39:1 on plaster and 3.90:1 on
     plaster-2 -- short of 4.5:1 for the small uppercase eyebrows. #7a601a gives
     5.35:1 / 4.76:1. (The brass it replaces, #9A7A18, was worse still at
     3.64 / 3.24 -- this pass fixes a pre-existing contrast failure.)
     If you lighten it, re-measure; do not eyeball it. */
  --gold-1:       #F5E7C1;   /* champagne highlight -- dark surfaces only */
  --gold-2:       #D4AF37;   /* core gold */
  --gold-3:       #7A601A;   /* deep gold -- the light-surface colour */

  /* --- gold ramps, defined once -----------------------------------------
     --grad-gold      the champagne ramp. DARK grounds only. What .gold-text,
                      the nav underline and the review stars on ink all use.
     --grad-gold-lit  the "lit glass" ramp: white into gold and back. Introduced
                      for the wordmark on the hero TV screen, and now shared by
                      the nav wordmark, the footer wordmark and the footer phone
                      number so those four surfaces cannot drift apart. Also
                      DARK grounds only -- it starts and ends on plaster, which
                      is invisible on a plaster background.
     Both paint text via `background-clip: text`, so anything using them needs a
     `@media (forced-colors: active)` fallback or the glyphs vanish entirely. */
  --grad-gold:     linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-1) 100%);
  --grad-gold-lit: linear-gradient(100deg, var(--plaster) 0%, var(--gold-1) 34%,
                                   var(--gold-2) 58%, var(--gold-1) 76%, var(--plaster) 100%);

  /* Old names kept as aliases so nothing breaks silently. Prefer the gold-N
     scale in new code; these exist to keep older rules honest. */
  --brass:        var(--gold-2);
  --brass-2:      var(--gold-1);
  --brass-deep:   var(--gold-3);
  --slate:        #3A4A52;
  --navy:         #1B3A5C;

  --text:         var(--ink);
  --text-soft:    #5A5A5F;
  --text-invert:  var(--plaster);
  --text-invert-soft: rgba(245,242,237,.66);

  --rule:         rgba(14,14,16,.14);
  --rule-invert:  rgba(245,242,237,.18);

  /* ---- type ---- */
  --f-display: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-hero:  clamp(2.35rem, 4.3vw, 4rem);
  --t-h2:    clamp(1.85rem, 3.2vw, 2.9rem);
  --t-h3:    clamp(1.3rem, 1.8vw, 1.65rem);
  --t-lead:  clamp(1.05rem,1.3vw, 1.25rem);
  --t-body:  1.0625rem;
  --t-small: 0.9375rem;
  --t-eyebrow: 0.75rem;

  /* ---- space (8pt) ---- */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;   --s7: 6rem;    --s8: 8rem;
  --section-y: clamp(4rem, 8vw, 7rem);
  /* Section rhythm. Every band is pulled UP over the one before it by
     --section-lift (see "Curved section overlaps" in styles.css), and that
     negative margin eats exactly that much of the previous band's visible
     bottom padding. So every band pays it back at the bottom: the gap between
     two blocks of content then comes out the same at every junction, whatever
     --section-lift happens to be at that viewport. Change --section-y, not
     these two -- they are derived. */
  --section-pt: calc(var(--section-y) + var(--section-lift) * .5);
  --section-pb: calc(var(--section-y) + var(--section-lift));
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --maxw:      1320px;
  --maxw-text: 68ch;

  /* ---- motion ---- */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-snap: cubic-bezier(.16, 1, .3, 1);
  --dur:       .5s;

  --radius: 2px;
  --nav-h: 74px;
  /* Height of the sticky mobile call bar. It is `position: fixed`, so it takes
     itself out of flow and will sit on top of whatever the page ends with --
     which is how the footer's last line ended up underneath it. The footer pays
     this back as bottom padding at <=767px. Measured: 1rem padding x2 + a .92rem
     display line. Safe-area inset is added separately, on the bar itself. */
  --callbar-h: 57px;

  /* Curved section overlaps -- each section pulls up over the one before it
     with a negative margin and a large top radius. Same values as the
     portfolio's SectionShell. */
  --radius-section: clamp(2rem, 5vw, 4rem);
  --radius-card:    clamp(1.25rem, 2.5vw, 2rem);
  --section-lift:   clamp(1.75rem, 3.5vw, 3.5rem);
}