/* Wavely — tokens.css (DESIGN.md v2, D-080)
   Design tokens, self-hosted fonts (+ metric-matched fallbacks), reset. Loaded by every page,
   including the server-rendered share page. Base values are the iOS app's (WavelyColor.swift);
   v2 adds the surfaces ladder, ember-as-light, named radii, the poster type scale and motion tiers.
   Every derived value the components use lives here — no raw rgb()/hex/radius in component files. */

@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2026;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist[wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2026;
}
/* Metric-matched fallbacks (Fontaine method) so the swap causes zero layout shift. Generated 2026-09-11. */
@font-face {
  font-family: "Clash Display Fallback";
  src: local("Arial");
  size-adjust: 101.21%;
  ascent-override: 87.93%;
  descent-override: 24.70%;
  line-gap-override: 8.89%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  size-adjust: 97.27%;
  ascent-override: 103.32%;
  descent-override: 30.33%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* §3a Base color (the app's, verbatim) */
  --bg: #0B0B0F;
  --surface: #16161C;
  --surface-2: #1F1F27;
  --hairline: #26262E;
  --text: #F5F5F7;
  --text-muted: #9A9AA5;
  --text-muted-surface: #A8A8B3;
  --ember: #FF5A1F;
  --ember-hi: #FF8A3D;
  --success: #3DDC97;
  --danger: #FF4D4D;
  --tier-basic: #9A9AA5;
  --tier-gold: #E8B54B;
  --tier-platinum: #A8D4F0;
  --tier-opal: #8FD9C9;
  --tier-obsidian: #9A86C8;

  /* §3b Surfaces ladder (one step per nesting level) */
  --overlay-1: rgb(255 255 255 / .04);
  --overlay-2: rgb(255 255 255 / .08);
  --overlay-edge: rgb(255 255 255 / .12);
  --edge-soft: rgb(255 255 255 / .06);
  --border-control: rgb(154 154 165 / .6);   /* 3.20:1 on bg — the non-text floor */
  --border-hover: rgb(154 154 165 / .35);
  --surface-warm: color-mix(in srgb, var(--surface) 94%, var(--ember));
  --glass: rgb(11 11 15 / .65);               /* dark glass: --text ≥ 5.8:1 over any cover */
  --glass-fallback: rgb(22 22 28 / .85);
  --nav-bg: rgb(11 11 15 / .5);
  --nav-bg-scrolled: rgb(11 11 15 / .8);
  --scrim: rgb(11 11 15 / .7);               /* ≥ 70% under text over imagery */
  --selection: rgb(255 90 31 / .35);

  /* §3c Ember as light (alpha of #FF5A1F only; one source per viewport) */
  --ember-a-6: rgb(255 90 31 / .06);
  --ember-a-8: rgb(255 90 31 / .08);
  --ember-a-12: rgb(255 90 31 / .12);        /* ceiling under text or controls */
  --ember-a-16: rgb(255 90 31 / .16);        /* ceiling anywhere (text-free zones) */
  --ember-a-24: rgb(255 90 31 / .24);        /* object light only: behind a phone/card, never under text */
  --ember-a-30: rgb(255 90 31 / .3);
  --ember-a-45: rgb(255 90 31 / .45);
  --glow-x: 65%; --glow-y: 55%;
  /* v3: two stops and a long radius so the light actually reaches the copy (gap analysis §2.1) */
  --glow-ember: radial-gradient(ellipse 70% 62% at var(--glow-x) var(--glow-y), var(--ember-a-16), var(--ember-a-8) 42%, transparent 80%);
  --glow-ember-soft: radial-gradient(ellipse 70% 62% at var(--glow-x) var(--glow-y), var(--ember-a-12), var(--ember-a-6) 42%, transparent 80%);
  --glow-object: radial-gradient(ellipse 58% 42% at 50% 62%, var(--ember-a-24), var(--ember-a-8) 45%, transparent 75%); /* reaches transparent inside its box: no clipped edge */
  --rim-ember: rgb(255 138 61 / .35);        /* the lit edge of an object */
  --edge-top: inset 0 1px 0 var(--overlay-edge);  /* a card's top highlight (no drop shadows) */
  --btn-highlight: inset 0 1px 0 rgb(255 255 255 / .22);
  --veil-ember: linear-gradient(180deg, transparent, var(--ember-a-6));
  --grad-ember: linear-gradient(180deg, var(--ember-hi), var(--ember));
  --glow-cta: 0 0 24px var(--ember-a-30);   /* the site's only box-shadow */
  --wave-unplayed: rgb(154 154 165 / .35);
  --wave-dim: rgb(154 154 165 / .14);

  /* §4 Type */
  --font-display: "Clash Display", "Clash Display Fallback", Arial, sans-serif;
  --font-body: "Geist", "Geist Fallback", Arial, sans-serif;
  --fs-micro: 0.75rem; --fs-meta: 0.875rem; --fs-body: 1rem; --fs-lede: 1.25rem; --fs-statement: 1.75rem;
  --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-56: 3.5rem;
  --fs-d5: 1.5rem;                                  /* 24 — Wave title, FAQ, smallest Clash */
  --fs-d4: 2rem;                                    /* 32 — card/row titles, screen items */
  --fs-d3: 2.5rem;                                  /* 40 → 56 at ≥ 768 — section titles */
  --fs-d2: clamp(2.5rem, 1.5rem + 4vw, 5rem);       /* 40 → 80 — one per stage */
  --fs-d1: clamp(3rem, 2rem + 6vw, 8rem);           /* 48 → 128 — the hero line only */
  --fs-price: 2rem;                                 /* 32 compact → 56 featured */
  --lh-d1: 0.95; --lh-d2: 1; --lh-d3: 1; --lh-d4: 1.1; --lh-d5: 1.15;
  --ls-d1: -0.02em; --ls-d2: -0.015em; --ls-d3: -0.01em;

  /* §5 Space / shape */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;
  --s-96: 96px; --s-128: 128px; --s-160: 160px; --s-224: 224px;
  --stage-pad: 48px; --section-gap: 128px;
  --r-4: 4px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-24: 24px; --r-40: 40px; --r-full: 999px;
  --max-w: 1120px; --max-w-stage: 1280px; --max-w-wide: 1440px;
  --gutter: 16px;

  /* §7 Motion: arrival · state · scroll (no duration) */
  --t-arrive: 560ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-micro: 120ms; --t-std: 180ms; --t-max: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-burst: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (min-width: 768px) { :root { --gutter: 24px; --fs-d3: 3.5rem; --fs-statement: 1.75rem; } }
@media (max-width: 767px) { :root { --fs-statement: 1.375rem; --fs-lede: 1.125rem; } }
@media (max-width: 479px) { :root { --fs-d2: 2rem; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --stage-pad: 64px; --section-gap: 160px; } }
/* v3: wide screens get a wider page, never a centered mobile layout in a sea of black */
@media (min-width: 1600px) { :root { --gutter: 48px; --max-w: 1280px; --max-w-stage: 1440px; --stage-pad: 80px; } }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.on-ember:focus-visible, .btn--primary:focus-visible { outline-color: var(--text); }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
::selection { background: var(--selection); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 120ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}