/* ============================================================
   Wocably — design tokens, theme system, base & utilities
   ============================================================ */

/* ---------- Fonts (self-hosted Overpass, subset WOFF) ---------- */
@font-face {
  font-family: "Overpass";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/overpass-400.woff") format("woff");
}
@font-face {
  font-family: "Overpass";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/overpass-600.woff") format("woff");
}
@font-face {
  font-family: "Overpass";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/overpass-700.woff") format("woff");
}
@font-face {
  font-family: "Overpass";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/overpass-800.woff") format("woff");
}
@font-face {
  font-family: "Overpass";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/overpass-900.woff") format("woff");
}
/* Metric-tuned fallback to keep CLS ≈ 0 while Overpass loads */
@font-face {
  font-family: "Overpass-fb";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 88.3%;
  descent-override: 38.3%;
  line-gap-override: 0%;
}

/* ---------- Layer 1: light defaults + invariants ---------- */
:root {
  color-scheme: light;

  /* accents (theme-invariant, straight from the app) */
  --purple: #A35FEC;
  --blue: #3BAEFE;
  --orange: #FF6B35;
  --amber: #FDC938;
  --green: #22C55E;
  --red: #EF4444;
  --reviewing: #FF9500;
  --mastered: #34C759;
  --purple-ink: #7C3AED; /* AA-safe purple for small text on light surfaces */
  --grad-brand: linear-gradient(135deg, #A35FEC, #3BAEFE);

  /* light surfaces (app light theme) */
  --bg: #F6F7FB;
  --card: #FFFFFF;
  --dim: #F1F3F8;
  --raise: #F8F9FD;
  --input: #FFFFFF;
  --text: #0F172A;
  --text-2: #475569;
  --muted: #64748B;
  --border: #D6DBED;
  --border-2: #E6EAF6;
  --primary-container: #E7E5FF;
  --ring: #6D28D9;
  --aurora-o: .5;
  --grain-o: .028;
  --shadow: 0 12px 40px -12px rgb(15 23 42 / .12);
  --shadow-lg: 0 24px 70px -24px rgb(15 23 42 / .22);

  /* type scale */
  --font: "Overpass", "Overpass-fb", system-ui, sans-serif;
  --font-ipa: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-sm: clamp(.8125rem, .78rem + .15vw, .875rem);
  --fs-body: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  --fs-lead: clamp(1.0625rem, .95rem + .5vw, 1.3125rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 2.6vw, 3.1rem);
  --fs-hero: clamp(2.6rem, 1.1rem + 6.6vw, 6rem);

  /* rhythm */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  --sect: clamp(5rem, 11vw, 8rem);
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --container: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Layer 2: system dark (unless user forced light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* KEEP IN SYNC with :root[data-theme="dark"] below */
    color-scheme: dark;
    --bg: #1E2144;
    --card: #262A51;
    --dim: #161938;
    --raise: #1A1D3B;
    --input: #2E3360;
    --text: #E9ECF7;
    --text-2: #C8D0EA;
    --muted: #A3AED0;
    --border: #3B4470;
    --border-2: #2E365E;
    --primary-container: #3F3AA7;
    --purple-ink: #C8A9F7;
    --ring: #3BAEFE;
    --aurora-o: .38;
    --grain-o: .04;
    --shadow: 0 12px 40px -12px rgb(0 0 0 / .5);
    --shadow-lg: 0 24px 70px -24px rgb(0 0 0 / .6);
  }
}

/* ---------- Layer 3: manual dark override (wins over both) ---------- */
:root[data-theme="dark"] {
  /* KEEP IN SYNC with the dark block above */
  color-scheme: dark;
  --bg: #1E2144;
  --card: #262A51;
  --dim: #161938;
  --raise: #1A1D3B;
  --input: #2E3360;
  --text: #E9ECF7;
  --text-2: #C8D0EA;
  --muted: #A3AED0;
  --border: #3B4470;
  --border-2: #2E365E;
  --primary-container: #3F3AA7;
  --purple-ink: #C8A9F7;
  --ring: #3BAEFE;
  --aurora-o: .38;
  --grain-o: .04;
  --shadow: 0 12px 40px -12px rgb(0 0 0 / .5);
  --shadow-lg: 0 24px 70px -24px rgb(0 0 0 / .6);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* film-grain texture, extremely subtle */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: var(--grain-o);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { padding: 0; }
b, strong { font-weight: 700; }

h1, h2, h3 { line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); font-weight: 900; }
h3 { font-size: var(--fs-h3); font-weight: 800; }

p { text-wrap: pretty; }

::selection { background: var(--purple); color: #fff; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }

[id] { scroll-margin-top: 110px; }

@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---------- Utilities ---------- */
.container {
  width: min(100% - 2 * clamp(1.25rem, 5vw, 2.5rem), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--sect); }
main .section:not(.demo) { content-visibility: auto; contain-intrinsic-size: auto 820px; }

.section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto var(--sp-8);
}
.section-head .lead { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--sp-3);
}

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .08em;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--text-2);
  max-width: 58ch;
  margin-top: var(--sp-4);
}

.ipa {
  font-family: var(--font-ipa);
  font-weight: 400;
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: .5em;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  padding: .95em 1.5em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgb(163 95 236 / .55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgb(163 95 236 / .7); }
.btn-primary[disabled]:hover { transform: none; box-shadow: 0 10px 26px -10px rgb(163 95 236 / .55); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--muted); background: var(--dim); }
.btn-ghost[disabled]:hover { border-color: var(--border); background: transparent; }

.btn-sm { font-size: .9375rem; padding: .72em 1.15em; }

.card {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.dot {
  display: inline-block;
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--c, var(--purple));
  flex-shrink: 0;
}

.ic {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 300;
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  padding: .8em 1.2em;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  translate: 0 -300%;
}
.skip-link:focus-visible { translate: 0 0; }

/* ---------- Scroll reveal (JS-gated; no-JS users see everything) ---------- */
.js .reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .8s var(--ease) var(--rd, 0s), translate .8s var(--ease) var(--rd, 0s);
}
.js .reveal.in-view { opacity: 1; translate: 0 0; }

/* screenshot mode (?shot=1): un-pin the viewport-height hero for full-page captures */
html[data-shot] .hero { min-height: 0; }

/* ---------- Reduced motion: global kill-switch ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; translate: 0 0; }
}

/* ============================================================
   Per-language font stacks (i18n)
   The bundled Overpass WOFFs are subset to ASCII + Latin-1 (~212 glyphs).
   Languages that need more (Turkish ğışİ, Polish ąęł, Vietnamese diacritics,
   Cyrillic, Arabic script, Indic, Thai, CJK) render in system fonts so
   headings never mix Overpass letters with fallback glyphs.
   IPA (.ipa) already uses --font-ipa and is unaffected.
   ============================================================ */
html[lang="tr"], html[lang="vi"], html[lang="pl"], html[lang="ru"] {
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html[lang="ar"], html[lang="ur"], html[lang="fa"] {
  --font: system-ui, -apple-system, "Segoe UI", "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
}
html[lang="hi"] {
  --font: system-ui, -apple-system, "Segoe UI", "Kohinoor Devanagari", "Noto Sans Devanagari", "Mangal", sans-serif;
}
html[lang="bn"] {
  --font: system-ui, -apple-system, "Segoe UI", "Kohinoor Bangla", "Noto Sans Bengali", "Vrinda", sans-serif;
}
html[lang="th"] {
  --font: system-ui, -apple-system, "Segoe UI", "Thonburi", "Noto Sans Thai", "Leelawadee UI", sans-serif;
}
html[lang="ja"] {
  --font: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif;
}
html[lang="zh-Hans"] {
  --font: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
html[lang="ko"] {
  --font: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}