/* ============================================================================
   TopVisuals — Headspin fluid token layer (authored; Headspin kit not configured)
   Every size is a fluid clamp() token. Reference var(--hfs/--hsp/--hss/--hrd/--hcl-*)
   in element trees — NEVER a fixed px. (skill: headspin-optional.md §2)
   ============================================================================ */
html:root{
  /* TYPE SCALE (--hfs-*) */
  --hfs-h0: clamp(3.0625rem, 2.151rem + 3.044vw, 4.75rem);
  --hfs-h1: clamp(2.25rem, 1.30rem + 2.95vw, 4.125rem);     /* hero/page H1 ~36→66px */
  --hfs-h2: clamp(1.75rem, 1.32rem + 1.35vw, 2.5rem);       /* section title ~28→40px */
  --hfs-h3: clamp(1.0625rem, 0.93rem + 0.42vw, 1.5rem);     /* card title ~17→24px */
  --hfs-h4: clamp(1.125rem, 1.02rem + 0.34vw, 1.3125rem);
  --hfs-h5: clamp(1rem, 0.95rem + 0.18vw, 1.0625rem);
  --hfs-h6: clamp(0.9375rem, 0.90rem + 0.12vw, 1rem);
  --hfs-text-l: clamp(1rem, 0.93rem + 0.30vw, 1.1875rem);   /* lead ~16→19px */
  --hfs-text-m: clamp(0.9375rem, 0.90rem + 0.18vw, 1.03125rem); /* body ~15→16.5px */
  --hfs-text-s: clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem);  /* small ~13→14px */
  --hfs-text-xs: clamp(0.6875rem, 0.67rem + 0.07vw, 0.75rem);  /* meta ~11→12px */
  --hfs-eyebrow: clamp(0.625rem, 0.61rem + 0.06vw, 0.6875rem); /* eyebrow ~10→11px */

  /* INNER SPACE (--hsp-*) — padding / gaps / grid space-between */
  --hsp-xxs: clamp(0.375rem, 0.34rem + 0.15vw, 0.5rem);
  --hsp-xs:  clamp(0.625rem, 0.55rem + 0.30vw, 0.875rem);
  --hsp-s:   clamp(0.875rem, 0.75rem + 0.45vw, 1.25rem);
  --hsp-m:   clamp(1.125rem, 0.93rem + 0.75vw, 1.75rem);
  --hsp-l:   clamp(1.5rem, 1.18rem + 1.20vw, 2.5rem);
  --hsp-xl:  clamp(2rem, 1.50rem + 1.80vw, 3.5rem);
  --hsp-xxl: clamp(2.75rem, 1.95rem + 2.95vw, 5rem);

  /* SECTION RHYTHM (--hss-*) — full-section vertical padding */
  --hss-xxs: clamp(1.5rem, 1.20rem + 1.10vw, 2.25rem);
  --hss-xs:  clamp(2.25rem, 1.75rem + 1.85vw, 3.5rem);
  --hss-s:   clamp(3rem, 2.30rem + 2.60vw, 4.75rem);
  --hss-m:   clamp(3.5rem, 2.60rem + 3.35vw, 5.75rem);      /* default section py ~56→92px */
  --hss-l:   clamp(4.5rem, 3.30rem + 4.45vw, 7.5rem);
  --hss-xl:  clamp(5.5rem, 3.90rem + 5.95vw, 9.5rem);
  --hss-xxl: clamp(7rem, 4.90rem + 7.80vw, 12.5rem);

  /* RADIUS (--hrd-*) */
  --hrd-s: clamp(0.375rem, 0.34rem + 0.15vw, 0.5rem);
  --hrd-m: clamp(0.5rem, 0.45rem + 0.22vw, 0.625rem);       /* button radius ~8→10px */
  --hrd-l: clamp(0.75rem, 0.64rem + 0.49vw, 1.125rem);      /* card radius ~12→18px */
  --hrd-xl: clamp(1rem, 0.82rem + 0.79vw, 1.5rem);          /* large card ~16→24px */
  --hrd-pill: 500px;
  --hrd-atom: 6px;

  /* GUTTER (horizontal page padding) */
  --hsx-gutter: clamp(1.25rem, 0.30rem + 4.00vw, 4rem);     /* ~20→64px */
  --hsx-container: 1440px;

  /* COLOUR ramp (--hcl-*) wired to the TV palette */
  --hcl-brand-9:  var(--bde-palette-tv-brand-7f1c2a8d-90b3-4e21-a1c7-tv2026-1);
  --hcl-brand-10: var(--bde-palette-tv-brand-hover-7f1c2a8d-90b3-4e21-a1c7-tv2026-2);
  --hcl-brand-3:  var(--bde-palette-tv-brand-light-7f1c2a8d-90b3-4e21-a1c7-tv2026-3);
  --hcl-brand-1:  #ffffff;
  --hcl-neutral-12: var(--bde-palette-tv-ink-7f1c2a8d-90b3-4e21-a1c7-tv2026-5);
  --hcl-neutral-11: var(--bde-palette-tv-text-7f1c2a8d-90b3-4e21-a1c7-tv2026-6);
  --hcl-neutral-9:  var(--bde-palette-tv-text-mute-7f1c2a8d-90b3-4e21-a1c7-tv2026-7);
  --hcl-on-brand:  #ffffff;

  /* CONNECTOR — repoint Breakdance's own vars at the fluid scale so native elements inherit it */
  --bde-h1-font-size: var(--hfs-h1);
  --bde-h2-font-size: var(--hfs-h2);
  --bde-h3-font-size: var(--hfs-h3);
  --bde-h4-font-size: var(--hfs-h4);
  --bde-h5-font-size: var(--hfs-h5);
  --bde-h6-font-size: var(--hfs-h6);
  --bde-body-font-size: var(--hfs-text-m);

  /* Button globals → TV brand + Headspin radius (fixes the broken default button look) */
  --bde-button-primary-background-color: var(--bde-palette-tv-brand-7f1c2a8d-90b3-4e21-a1c7-tv2026-1);
  --bde-button-primary-background-color-hover: var(--bde-palette-tv-brand-hover-7f1c2a8d-90b3-4e21-a1c7-tv2026-2);
  --bde-button-primary-text-color: #ffffff;
  --bde-button-primary-text-color-hover: #ffffff;
  --bde-button-primary-border-color: transparent;
  --bde-button-primary-border-color-hover: transparent;
  --bde-button-border-radius: var(--hrd-m);
  --bde-button-font-weight: 600;
  --bde-button-padding-base: var(--hsp-s) var(--hsp-l);
  --bde-button-font-size: var(--hfs-text-m);
}