/* Glowing Foot Spa: design tokens.
   Source of truth: AI/Style/STYLE-GUIDE.md. Change the guide first, then this file.
   Components use the ground roles (--bg, --text, --accent …), never the palette directly.
   Each section says which ground it stands on: <section data-ground="golden|white|linen">. */

/* ---------------------------------------------------------------- fonts (§3)
   Self-host Jost and Noto Sans (both SIL Open Font License, from Google Fonts) in public/fonts/.
   PREVIEW COPY of AI/Style/tokens.css: only the font path differs (relative, so the page also opens from disk).
   DuckPHP's CSP allows fonts from this site only, and the site makes no third-party requests.
   Chinese uses the visitor's system font (PingFang, Microsoft YaHei, Noto Sans CJK): no download. */
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------- palette (§2) */
  --night: #0C0C0D;        /* the black of the mark: words on white, and the booking page's buttons. Never a section's ground */

  --gold: #D8B869;         /* the mark's gold: solid things (mark, button, points) */
  --glow: #EAC87B;         /* the halo's gold: light things (halo, button hover) */
  --gold-ink: #8B6508;     /* golden words at every size: her G's hue, deepened until it reads on white (5.3:1) */

  --white: #FFFFFF;        /* page on white grounds */
  --linen: #F4F3F0;        /* panels on white, and the linen ground */
  --champagne: #F8F2E3;    /* the footer only: a very pale gold */
  --champagne-line: #E8DCBE;
  --linen-line: #E4E1DB;   /* 1 px hairlines on white */
  --linen-edge: #8A857B;   /* field borders on white (3.6:1) */
  --stone: #4F4B45;        /* muted text on white (8.7:1) */
  --ink: #2E2B27;          /* body text on white (14:1) */

  /* ---------------------------------------------------------------- type (§3) */
  --font: "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", Arial, sans-serif;   /* everything you read */
  --font-head: "Jost", "Century Gothic", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;   /* headlines, her name: round letters like her G */
  --fw-display: 600;       /* display, H1, H2, large numbers */
  --fw-regular: 450;       /* body, numbers */
  --fw-strong: 600;        /* H3, labels, nav, buttons, wordmark */

  --fs-display: clamp(42px, 4.3vw, 62px);
  --fs-h2: clamp(34px, 3.2vw, 46px);
  --fs-h3: clamp(22px, 1.9vw, 26px);
  --fs-lead: clamp(19px, 1.4vw, 21px);
  --fs-body: 18px;
  --fs-small: 16px;
  --fs-label: 16px;
  --fs-number: 22px;

  --lh-display: 1.1;
  --lh-heading: 1.12;
  --lh-body: 1.55;

  --track-display: 0;
  --track-label: 0;
  --track-wordmark: 0.14em;  /* her name is the only thing still in capitals */

  /* ---------------------------------------------------------------- layout (§4) */
  --container: 1280px;
  --margin: 24px;          /* 48 px tablet, 80 px desktop */
  --columns: 5;            /* one foot: 5 zones. 10 zones from 1024 px up (two feet) */
  --gutter: 16px;          /* 24 px from 768 px up */
  --section-pad: 56px;     /* 96 px on desktop */
  --header-h: 72px;        /* 84 px from 768 px up */

  /* ---------------------------------------------------------------- shapes and lines (§4, §5) */
  --radius: 0;             /* square corners everywhere; circles are the only curves */
  --line-hair: 1px;        /* structure */
  --line-glow: 2px;        /* halo, focus, the active mark */
  --icon-stroke: 1.5;      /* icons */
  --cut: 17px;             /* the crossbar cut on a 56 px button (30% of the height) */
  --cut-tag: 8px;          /* on a 28 px tag */
  --point: 12px;           /* the pressure-point marker */
  --button-h: 56px;
  --field-h: 52px;

  /* ---------------------------------------------------------------- motion (§9) */
  --dur-ui: 180ms;        /* hover and selection: quick, so it feels connected to your hand */
  --dur-reveal: 600ms;
  --dur-halo: 1400ms;
  --ease-calm: cubic-bezier(0.22, 0.61, 0.2, 1);
}

@media (min-width: 768px) {
  :root { --margin: 48px; --gutter: 24px; --header-h: 84px; }
}
@media (min-width: 1024px) {
  :root { --columns: 10; }
}
@media (min-width: 1280px) {
  :root { --margin: 80px; --section-pad: 96px; }
}

/* ---------------------------------------------------------------- grounds (§2a)
   golden: white with golden words. Everything that used to be black: header, hero, the booking band, reviews, footer.
   white: reading sections, and the booking page's cards.  linen: a quiet second white.
   No dark grounds and no gold grounds. */
:root,
[data-ground="white"],
[data-ground="linen"] {
  --bg: var(--white);
  --surface: var(--linen);
  --line: var(--linen-line);
  --edge: var(--linen-edge);
  --text: var(--ink);
  --text-strong: var(--night);
  --text-muted: var(--stone);
  --heading: var(--night);
  --accent: var(--gold-ink);
  --accent-line: var(--gold);       /* decorative only: never text on white */
  --btn-bg: var(--night);
  --btn-text: var(--white);
  --btn-bg-hover: var(--gold-ink);
  --btn-text-hover: var(--white);
  --focus: var(--gold-ink);
}

[data-ground="linen"] {
  --bg: var(--linen);
  --surface: var(--white);
}

[data-ground="golden"] {
  --bg: var(--white);
  --surface: var(--linen);
  --line: var(--linen-line);
  --edge: var(--linen-edge);
  --text: var(--ink);               /* paragraphs stay readable */
  --text-strong: var(--gold-ink);   /* names, links, the wordmark */
  --text-muted: var(--stone);
  --heading: var(--gold-ink);       /* display, H2, large numbers */
  --accent: var(--gold-ink);
  --accent-line: var(--gold);
  --btn-bg: var(--gold);
  --btn-text: var(--night);
  --btn-bg-hover: var(--glow);      /* the button lights up */
  --btn-text-hover: var(--night);
  --focus: var(--gold-ink);
}

[data-ground] {
  background: var(--bg);
  color: var(--text);
}

/* Chinese: lighter tracking on labels, more air between lines (§3) */
:lang(zh) { --track-label: 0.12em; --track-display: 0.02em; --lh-body: 1.85; --lh-display: 1.25; }