/* tokens.css — GENERATED. Do not hand-edit; re-run the extractor.
 *
 * The MHF website's design tokens, font faces and glass surfaces, copied into
 * this repo so nothing is referenced across repositories and there is no build
 * step. Produced by scripts/extract-tokens.mjs, whose header states the rule.
 *
 *   source repo   vaselined/mhf-website
 *   source file   site/assets/css/glass.css
 *   source sha    605bf19
 *   blocks kept   4 @font-face, 7 :root, 16 .glass
 *   removed       4 glass-suppression rules (R-1; the rule is in the extractor)
 *
 * The component rules of the design round live in door.css, NOT here. Keeping
 * them apart is what makes the next website copy a replacement rather than a
 * merge. An edit to this file fails test/tokens-provenance.test.mjs.
 */

@font-face { font-family: 'IBM Plex Sans'; src: url('./fonts/plex-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'IBM Plex Sans'; src: url('./fonts/plex-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: 'IBM Plex Sans'; src: url('./fonts/plex-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'IBM Plex Sans'; src: url('./fonts/plex-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root { --ground:        #f1f1f1; --ink:           #202020; --ink-soft:      #4a4a4a; --hairline:      rgba(32, 32, 32, .16); --blue:          #02478e; --green:         #244f1a; --wine:          #6e022e; --eyebrow-green-bg: #cce8b5; --eyebrow-blue-bg:  #bee7ff; --tag-on-blue:   #b7e1fb; --tag-on-green:  #b6d4a0; --tag-on-wine:   #ffdce2; --tag-grey:      #d1d1d1; --tint-blue:     #e2ecf6; --footer-grey:   #d8d8d8; --r-pill:   999px; --r-card:   20px; --r-glass:  28px; --r-form:   32px; --r-label:  12px; --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-hero-r3: clamp(2.35rem, 7.6vw, 5rem); --fs-hero:    min(max(calc(1.5 * var(--fs-hero-r3)), 7.7vw), 10rem); --fs-h2:      calc(1.3 * clamp(1.6rem, 4.4vw, 3rem)); --fs-h3:      clamp(1rem, 2vw, 1.4rem); --fs-body:    clamp(.875rem, 1.55vw, 1.0625rem); --fs-small:   clamp(.72rem, 1.2vw, .8125rem); --fs-eyebrow: clamp(.72rem, 1.25vw, .9rem); --lh-tight:   1.02; --lh-body:    1.55; --edge:       clamp(12px, 2.2vw, 28px); --gutter:     var(--edge); --pill-h:     clamp(40px, 5.4vh, 54px); --card-pad:   clamp(18px, 2.4vw, 34px); --nav-h:      clamp(52px, 8vh, 68px); --glass-bg:      rgba(255, 255, 255, .58); --glass-blur:    28px; --glass-sat:     1.5; --glass-border:  rgba(255, 255, 255, .62); --glass-shadow:  0 18px 50px rgba(2, 71, 142, .10), 0 2px 6px rgba(32, 32, 32, .04); --scrim:         .46; --logo-opacity:  .72; --bg-image:url('/assets/img/bg-placeholder.webp'); --bg-scale:1.42222; --bg-ratio:640 / 544; }

.glass { position: relative; width: min(1180px, 100%); min-height: calc(100dvh - var(--nav-h) - clamp(76px, 12vh, 116px)); max-height: calc(100dvh - var(--nav-h) - clamp(76px, 12vh, 116px)); display: flex; flex-direction: column; justify-content: safe center; overflow: hidden; padding: clamp(18px, 3.4vh, 46px) clamp(16px, 3vw, 52px); border-radius: var(--r-glass); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); scrollbar-width: thin; }

.glass[data-ground='blue'] { background: var(--blue); border-color: rgba(255,255,255,.22); color: #fff; }

.glass[data-ground='green'] { background: var(--green); border-color: rgba(255,255,255,.22); color: #fff; }

.glass[data-ground='wine'] { background: var(--wine); border-color: rgba(255,255,255,.22); color: #fff; }

.glass[data-ground] .eyebrow { color: var(--ink); }

.glass[data-ground] .lede, .glass[data-ground] p { color: rgba(255,255,255,.88); }

.glass[data-ground] .news-card p, .glass[data-ground] .news-card .news-title { color: var(--ink); }

.glass[data-ground] .news-card .news-date { color: var(--ink-soft); }

.glass[data-ground] .news-card .news-more { color: var(--ink); }

.glass[data-ground] .strip-frame { border-color: rgba(255, 255, 255, .30); background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .78); }

@media (max-width: 520px) and (max-height: 720px), (max-height: 430px) {
  :root { --nav-h: 46px; }
  .page { padding: calc(var(--nav-h) + 10px) 12px 44px; }
  .glass { padding: 13px 12px; }
  .footer-top { gap: 9px; }
  .footer-col h3 { margin-bottom: 3px; }
  .footer-col a, .footer-col span { margin: 2px 0; }
  .footer-social { margin-top: 7px; }
  .form-card { gap: 6px; }
  .field input, .field textarea { padding: 7px 12px; }
  .subcards { gap: 7px; }
  .subcard { padding: 10px 12px; }
}

:root { --sbw: 0px; }

.glass { width: 100%; min-height: calc(100dvh - 3 * var(--edge) - var(--nav-h)); max-height: calc(100dvh - 3 * var(--edge) - var(--nav-h)); }

.glass[data-ground] { padding: clamp(18px, 3.4vh, 46px) clamp(16px, 3.4vw, 56px); }

.glass > .take-action { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: clamp(16px, 3vh, 36px); }

:root { --news-pad: clamp(13px, 1.5vw, 22px); }

#home-news > .glass[data-ground] { padding: clamp(8px, 2.2vh, 30px) clamp(8px, 1.8vw, 30px); }

:root { --spring: cubic-bezier(.32, .72, 0, 1); --pop: cubic-bezier(.34, 1.56, .64, 1); --dev-h: clamp(300px, 62vh, 620px); }

@media (max-width: 860px) {
  :root { --dev-h: clamp(170px, 30vh, 300px); }
  .app-split, .app-split[data-flip='true'] { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: clamp(14px, 2.6vh, 28px); }
  .app-split[data-flip='true'] .app-words { order: 0; }
  .app-split .device { order: -1; }
  .app-words { justify-items: center; text-align: center; }
  .app-words .app-lead { max-width: 38ch; }
  .app-card { justify-items: center; }
  .app-steps li { text-align: left; }
  .app-steps li[data-on='true'], .app-split[data-flip='true'] .app-steps li[data-on='true'] { transform: none; }
  .notif-stage { justify-items: center; }
  .notif-stage .notif-row { justify-content: center; }
}

#app-hero > .glass, #app-ios > .glass, #app-android > .glass, #app-notifications > .glass { overflow: visible; }

:root { --spring: cubic-bezier(.32, .72, 0, 1); --pop: cubic-bezier(.34, 1.56, .64, 1); }

body[data-page='program'] #program-hero > .glass {
  --hero-grow: 1;
  --fs-eyebrow: calc(var(--hero-grow) * clamp(.72rem, 1.25vw, .9rem));
  --fs-body:    calc(var(--hero-grow) * clamp(.875rem, 1.55vw, 1.0625rem));
  --fs-small:   calc(var(--hero-grow) * clamp(.72rem, 1.2vw, .8125rem));
  --fs-h3:      calc(var(--hero-grow) * clamp(1rem, 2vw, 1.4rem));
  --fs-h2:      calc(var(--hero-grow) * 1.3 * clamp(1.6rem, 4.4vw, 3rem));
}