/* =============================================================================
   base.css — design tokens, web fonts, reset, page defaults

   Load order in index.html: base → nav → story → card → sections → reveal →
   responsive.
   Everything below is written for this replica; the values are the ones the
   page has to have in order to look like the reference (see tools/ for the
   audit that compares every computed property against it).

   Colour and motion tokens keep their original names because the markup, the
   brand SVG and the scripts all reference them (var(--gold), var(--accent),
   var(--ease-out) …). Tokens added by this rewrite are grouped at the end.

   theme.css is pulled in with @import rather than a <link> in index.html, so
   the page's element tree stays byte-for-byte the reference's — the stylesheet
   audit in tools/ compares element trees by position and would otherwise see
   one extra <link>. It only carries alternate colourways; the palette the page
   actually paints with is the one declared on :root below.
   ============================================================================= */

@import url("theme.css");

/* --- Geist Variable, five unicode subsets -------------------------------- */

@font-face {
  font-family: Geist Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/geist-cyrillic-ext-wght-normal-DjL33-gN.woff2) format("woff2-variations");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/geist-cyrillic-wght-normal-BEAKL7Jp.woff2) format("woff2-variations");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/geist-vietnamese-wght-normal-6IgcOCM7.woff2) format("woff2-variations");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301,
    U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/geist-latin-ext-wght-normal-DC-KSUi6.woff2) format("woff2-variations");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: Geist Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/geist-latin-wght-normal-BgDaEnEv.woff2) format("woff2-variations");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens -------------------------------------------------------------- */

:root {
  /* --- palette ------------------------------------------------------------
     Every colour the page paints with is declared here and nowhere else, so a
     recolour is a single block to rewrite. theme.css restates this same block
     per colourway (html[data-theme="…"]); the values below are the original
     site's, which is what the fidelity audits compare against. */

  /* surfaces */
  --page: #f1f0e9;
  --scene: #e7e5dc;
  --surface: #f2f1e9;          /* card faces, panels */
  --surface-hi: #f7f6f1;       /* story wash, top stop */
  --surface-lo: #efeee7;       /* story wash, bottom stop */
  --surface-sunk: #e8e6d9;     /* inset chips sitting inside a card */
  --chip: #d9d7ca;
  --chip-alt: #cfcdc1;
  --line: #d4d2c5;             /* 2px hairlines around cards and buttons */
  --glass-72: #f3f2ecb8;       /* translucent nav bar */
  --glass-82: #f3f2ecd1;       /* translucent nav once scrolled */

  /* text */
  --ink: #151515;
  --ink-2: #65665f;
  --ink-3: #8a8b81;
  --ink-deep: #09090a;         /* mobile menu backdrop */
  --ink-panel: #161616;        /* dark link panel, closing band */
  --ink-panel-line: #34342d;   /* hairline inside those dark surfaces */
  --scrim: #000000a3;

  /* the ink colour, pre-multiplied with alpha — CSS cannot tint a hex at
     paint time, so each step the page uses is spelled out */
  --ink-a10: #1515151a;
  --ink-a12: #1515151f;
  --ink-a14: #15151524;
  --ink-a16: #15151529;
  --ink-a20: #15151533;
  --ink-a22: #15151538;
  --hairline: #15151514;

  /* accent and the gold used by the brand mark */
  --accent: #ffd400;
  --accent-tint: #f8ecc0;
  --accent-glow: #ffd40024;
  --accent-glow-0: #ffd40000;
  --accent-shadow: #ffd40073;
  --accent-shadow-strong: #ffd40080;
  /* the text colour used *on top of* an accent fill — the nav pill and the
     download button. It equals --ink on every light colourway; the dark one
     needs it decoupled, because there --ink is near-white and would sit at
     1.3:1 on the accent. */
  --on-accent: #151515;
  --gold: #c9a227;
  --gold-bright: #f0d36a;

  /* scrollbar (Firefox reads the pair below, Blink the thumb rule) */
  --scroll-thumb: #c4c2b5;
  --scroll-thumb-hover: #a5a396;

  /* motion and type */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font: "Geist Variable", "Geist", -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;

  /* added by this rewrite, so the values below have names */
  --radius-pill: 999px;
  --z-reveal: 0;
  --z-shell: 1;
  --z-stage: 1;
  --z-copy: 2;
  --z-menu: 40;
  --z-nav: 50;

  /* the closing band (see reveal.css). Its height is also the scroll runway
     that uncovers it, so the two can never drift apart. */
  --reveal-h: clamp(240px, 44svh, 520px);
}

/* --- reset --------------------------------------------------------------- */

*,
::before,
::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

svg {
  display: block;
}

/* --- page shell ---------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

html::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 3px solid var(--page);
  border-radius: var(--radius-pill);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

html::-webkit-scrollbar-track,
html::-webkit-scrollbar-corner {
  background: transparent;
}

/* --- the 3D stage host and the brand mark -------------------------------- */

/* The helix renderer appends its own three nested divs inside this box; the
   stage itself stays click-through so the copy above it keeps working. */
.three-helix-stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-stage);
  pointer-events: none;
}

.three-helix-renderer,
.three-helix-renderer > div {
  pointer-events: none;
}

.brand-mark {
  display: block;
  color: var(--ink);
}

.brand-mark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* the nav's brand mark is the app icon, a raster: same box as the symbol */
.brand-mark img {
  display: block;
  width: 100%;
  height: auto;
}