/* ==========================================================================
   TOKENS — the single source of truth for colour, type, space and motion.
   Every component below reads from these; nothing hardcodes a value.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --c-black: #000000;
  --c-offwhite: #f8f7f5;
  --c-grey: #a6a6ae;
  --c-cyan: #86c1ca;
  --c-beige: #edeae4;

  /* Derived, kept inside the restrained system (no new hues) */
  --c-rule: color-mix(in srgb, var(--c-black) 12%, transparent);
  --c-rule-strong: color-mix(in srgb, var(--c-black) 22%, transparent);
  --c-rule-inv: color-mix(in srgb, var(--c-offwhite) 18%, transparent);

  /* ---- Semantic ---------------------------------------------------------- */
  --bg: var(--c-offwhite);
  --fg: var(--c-black);
  --fg-muted: var(--c-grey);
  --accent: var(--c-cyan);

  /* ---- Type -------------------------------------------------------------- */
  /* The language route sets <html lang>, which picks the family below. */
  --font-display: "Stack Sans Headline", "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  /* Fluid scale, 360px → 1600px viewport */
  --t-micro: clamp(0.625rem, 0.6rem + 0.12vw, 0.75rem);
  --t-small: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
  --t-body: clamp(0.9375rem, 0.89rem + 0.24vw, 1.125rem);
  --t-lead: clamp(1.125rem, 0.98rem + 0.7vw, 1.625rem);
  --t-statement: clamp(1.75rem, 1.1rem + 2.9vw, 4.25rem);
  --t-h2: clamp(2.5rem, 1.2rem + 5.6vw, 7rem);
  --t-display: clamp(3.25rem, 0.4rem + 12.2vw, 13.5rem);
  --t-numeral: clamp(3rem, 1.4rem + 6.4vw, 8rem);

  --tracking-tight: -0.03em;
  --tracking-display: -0.045em;
  --tracking-label: 0.14em;
  --tracking-nav: 0.02em;

  --leading-display: 0.86;
  --leading-tight: 1.02;
  --leading-body: 1.55;

  /* ---- Layout ------------------------------------------------------------ */
  --gutter: clamp(0.875rem, 1.6vw, 1.75rem);
  --pad-x: clamp(1.25rem, 4.4vw, 5rem);
  --header-h: clamp(3.5rem, 4.6vw, 4.75rem);
  --section-y: clamp(5rem, 12vw, 13.5rem);
  --maxw: 120rem;

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-image: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur-base: 460ms;
  --dur-slow: 900ms;
  --dur-image: 1100ms;
}

/* Dark surface context — footer and any inverted block opt in via .is-inverted */
.is-inverted {
  --bg: var(--c-black);
  --fg: var(--c-offwhite);
  --fg-muted: var(--c-grey);
  --c-rule: var(--c-rule-inv);
  --c-rule-strong: color-mix(in srgb, var(--c-offwhite) 34%, transparent);
}

/* ==========================================================================
   LANGUAGE FONTS
   The route is the source of truth: /en, /kr and /vn each set <html lang>,
   and the family follows from that — no JavaScript involved.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

html[lang="ko"] {
  --font-display: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
    sans-serif;
}

html[lang="vi"] {
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

/* Both alternates carry real weights, so hierarchy can use them. */
html[lang="ko"] body,
html[lang="vi"] body {
  font-synthesis: weight;
}

/* --------------------------------------------------------------------------
   Language typography

   Stack Sans Headline ships one weight that already reads heavy, so English
   needs no bold. Noto Sans KR and Plus Jakarta Sans both carry real weights,
   so their headings take an actual 700 to match that presence — no synthesis.

   Leading is opened up too: Hangul is visually taller than Latin at the same
   size, and Vietnamese stacks tone marks above accented vowels. The English
   values would crowd or clip both.
   -------------------------------------------------------------------------- */

html[lang="ko"] :is(h1, h2, h3, .how-hero__title, .how-final__statement),
html[lang="vi"] :is(h1, h2, h3, .how-hero__title, .how-final__statement) {
  font-weight: 700;
}

/* Headings — enough room for tone marks and tall Hangul. */
html[lang="ko"] :is(.how-hero__title, .compare-head__title, .how-final__statement),
html[lang="vi"] :is(.how-hero__title, .compare-head__title, .how-final__statement) {
  line-height: 1.24;
}

html[lang="ko"] .heading-xl,
html[lang="vi"] .heading-xl {
  line-height: 1.16;
}

html[lang="ko"] :is(.timeline__name, .how-reasons h3, .os__step),
html[lang="vi"] :is(.timeline__name, .how-reasons h3, .os__step) {
  line-height: 1.35;
}

/* Body — Korean in particular wants noticeably more than Latin. */
html[lang="ko"] :is(p, li, dd, .how-hero__body, .timeline__text) {
  line-height: 1.75;
}

html[lang="vi"] :is(p, li, dd, .how-hero__body, .timeline__text) {
  line-height: 1.65;
}

/* Both faces are optically wider than the English display face; the tight
   display tracking that suits Headline turns into crowding here. */
html[lang="ko"] :is(h1, h2, h3, .how-hero__title, .how-final__statement),
html[lang="vi"] :is(h1, h2, h3, .how-hero__title, .how-final__statement) {
  letter-spacing: -0.015em;
}

html[lang="ko"] :is(.label, .os__note, .how-reasons__index) {
  letter-spacing: 0.08em;
}