/* ============================================================================
   tokens.css — every design variable in the site, with theme A (apothecary)
   as the default value set.

   §3.2 iron law: the three themes share one DOM. This file and themes.css are
   the ONLY files allowed to contain a literal colour. Everything else uses
   var(). tools/check-colors.mjs enforces that at build time.

   Adding a token here means adding it to all three blocks in themes.css.
   ========================================================================= */

:root {
  /* --- Type ---------------------------------------------------------------
     Fonts are per-theme (§3.5) but the SCALE below is shared by all three,
     so switching a theme can never reflow the page. */
  --font-display: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid scale. --fs-body floors at 14px and --fs-price at 18px per §3.7
     (the customer base skews older). */
  --fs-micro: 0.8125rem;                          /* 13px — labels/legal only */
  --fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);   /* 15 → 17px */
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-price: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);       /* ≥ 18px always */
  --fs-price-sm: 1.125rem;                        /* 18px — the hard floor */
  --fs-h4: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.3vw, 2.25rem);
  --fs-h1: clamp(1.875rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-hero: clamp(2.25rem, 1.5rem + 3.6vw, 4.5rem);

  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-body: 1.75;          /* generous — long Chinese copy at reading size */
  --ls-display: 0.02em;
  --ls-caps: 0.14em;
  --fw-body: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-display: 700;

  /* --- Colour: surfaces --------------------------------------------------- */
  --c-bg: #FAF7F2;              /* 宣纸 */
  --c-bg-alt: #F2EDE4;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F6F1E8;
  --c-surface-inset: #EFE8DC;

  /* --- Colour: text ------------------------------------------------------- */
  --c-ink: #1F1D1A;             /* 墨 — body, ≥ 4.5:1 on --c-bg */
  --c-ink-soft: #55504A;
  --c-ink-faint: #6E685F;       /* darkest "muted" that still clears 4.5:1 */
  --c-hero-ink: #FAF7F2;        /* text sitting on --hero-overlay, always light */

  /* --- Colour: brand ------------------------------------------------------ */
  /* --c-accent is the FILL (buttons, bars, seals). --c-accent-text is the
     same brand colour tuned to stay ≥ 4.5:1 as text on --c-bg — on the dark
     festive theme the two cannot be the same value. */
  --c-accent: #8B1E3F;          /* 绛红 */
  --c-accent-hover: #6F162F;
  --c-accent-text: #8B1E3F;
  --c-accent-ink: #FFFFFF;      /* text placed ON --c-accent */
  --c-accent-soft: #F3E2E7;
  --c-accent-line: #D9B8C2;

  /* Gold has two tokens on purpose (§3.7).
     --c-gold is decoration ONLY: 1px rules, badge edges, seals.
     --c-gold-ink is the only gold permitted on text, and is kept ≥ 4.5:1. */
  --c-gold: #C9A227;
  --c-gold-ink: #8A6D1F;
  --c-gold-soft: #F4EAD0;
  --c-on-gold: #241A05;         /* text on a --c-gold fill */

  /* Prices get their own token so §3.7's "price must be readable" rule is
     enforced in one place rather than inherited from whatever accent is. */
  --c-price: #8B1E3F;

  /* --- Colour: structure -------------------------------------------------- */
  --c-line: #E0D8C9;
  --c-line-strong: #C8BDA9;
  --c-focus: #8B1E3F;
  --c-scrim: rgb(31 29 26 / 0.55);   /* drawer / modal backdrop */

  /* --- Colour: status ----------------------------------------------------- */
  --c-ok: #2E6B45;
  --c-warn-bg: #FBF0D8;
  --c-warn-ink: #7A5410;
  --c-warn-line: #E3C476;
  --c-danger: #A3252B;
  --c-disabled-bg: #E7E1D6;
  --c-disabled-ink: #78716A;

  /* --- Colour: chrome ----------------------------------------------------- */
  --c-header-bg: #FAF7F2;
  --c-header-ink: #1F1D1A;
  --c-topbar-bg: #8B1E3F;
  --c-topbar-ink: #FFF6E8;
  --c-footer-bg: #201D19;
  --c-footer-ink: #E4DCCD;
  --c-footer-ink-soft: #ADA394;

  /* --- Colour: category bars (§3.4 抽屉标签式版式卡) ----------------------- */
  --c-cat-mooncake: #8B1E3F;
  --c-cat-soup: #7A5230;
  --c-cat-tea: #55702F;
  --c-cat-spice: #A05A1E;
  --c-cat-grain: #2F5E63;

  /* --- Product label card (used while photography is pending, §3.4) -------- */
  --c-label-bg: #F6F1E8;
  --c-label-ink: #1F1D1A;
  --c-label-line: #D8CDB8;

  /* --- Seal / badge (§3.5 印章风格徽章) ----------------------------------- */
  --c-seal-bg: #8B1E3F;
  --c-seal-ink: #FFF6E8;
  --c-seal-line: #C9A227;
  --seal-radius: 4px;

  /* --- Shape & depth ------------------------------------------------------ */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border-w: 1px;
  --shadow-sm: 0 1px 2px rgb(31 29 26 / 0.06), 0 1px 3px rgb(31 29 26 / 0.08);
  --shadow: 0 2px 6px rgb(31 29 26 / 0.07), 0 8px 24px rgb(31 29 26 / 0.08);
  --shadow-lg: 0 10px 40px rgb(31 29 26 / 0.16);
  --hero-overlay: linear-gradient(180deg, rgb(31 29 26 / 0.06), rgb(31 29 26 / 0.34));

  /* --- Spacing & layout (shared by all themes) ---------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 7vw, 6rem);

  /* Touch targets never go below 44px (§3.7). */
  --tap: 44px;
  --tap-lg: 52px;

  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}