/* ==========================================================================
   DESIGN TOKENS -- the one file every new site MUST rewrite. Everything
   below is deliberately grayscale/generic so a site can never accidentally
   ship looking like "the starter kit" -- if you see gray in a browser
   preview, tokens.css hasn't been done yet.

   Do NOT hand-pick values in isolation. Read site-building/SKILL.md section
   2 first ("设计词汇表": font pairing menu by brand personality, color
   derivation formula, radius/shadow philosophy) and derive every value below
   from that brand's specific personality -- see kea-digital (rounded,
   forest-green/gold/teal, Unbounded+Inter) and aurelia-jewellery (sharp,
   near-black plum/gold, Playfair Display+Jost) for two finished, opposite
   examples of "the same tokens.css shape, completely different result".
   ========================================================================== */

@font-face {
  font-family: "ReplaceDisplay";
  src: url("../fonts/REPLACE-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ReplaceBody";
  src: url("../fonts/REPLACE-body-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Add one more @font-face per extra weight you actually use. Budget: total
   font FILES across the whole site <= 5 (see SKILL.md performance rules) --
   that's usually 2 families x 2-3 weights, not more. */

:root {
  /* ---- Color: derive from brand personality, don't pick in isolation ----
     Formula (SKILL.md section 2, "配色"): pick ONE hue from the brand's
     industry/personality -> derive a near-black (tinted with that hue, never
     pure #000) for --ink, a near-white (95% lightness of that hue) for
     --surface, and ONE accent (complementary or adjacent hue) that is used
     for CTAs/highlights ONLY, nowhere else. Check WCAG AA contrast before
     finalizing. */
  --ink: #1a1a1a;
  --ink-deep: #0d0d0d;
  --surface: #f4f4f2;
  --surface-alt: #e8e7e3;
  --surface-card: #ffffff;
  --accent: #6b6b6b;
  --accent-light: #999999;
  --accent-dark: #454545;
  /* Optional second highlight color for badges/underlines only -- delete
     these three lines entirely if your brand only needs one accent (most
     brands should; a two-accent system is the exception, see kea-digital's
     gold+teal for when it earns its place). */
  --secondary: #808080;
  --secondary-dark: #5c5c5c;
  --line: rgba(26, 26, 26, 0.12);
  --line-on-dark: rgba(244, 244, 242, 0.18);
  --muted: #6a6a6a;
  --on-dark-muted: #b8b8b8;

  /* ---- Shape language: pick ONE end of this spectrum per brand, don't mix.
     Sharp (radius 0, hairline borders, no shadows) reads premium/editorial
     (see aurelia-jewellery). Soft (radius 16-32px, generous shadows) reads
     friendly/approachable (see kea-digital). A radius of exactly 8-12px is
     the "didn't decide" default -- avoid shipping that. */
  --radius-lg: 0px;
  --radius-md: 0px;
  --radius-sm: 0px;
  /* If you chose the soft/rounded end above, also uncomment shadows and
     reference --shadow-sm/md in sections.css card hovers. Sharp/luxury
     brands should typically delete these three lines and any --shadow-*
     reference in sections.css -- the motion hard rule (see main.js /
     README) forbids animating box-shadow, so cards there use only
     translateY on hover, not shadow lift. */
  /* --shadow-sm: 0 2px 16px rgba(0,0,0,0.08); */
  /* --shadow-md: 0 18px 44px rgba(0,0,0,0.14); */

  --container: 1200px;
  --font-display: "ReplaceDisplay", Georgia, serif;
  --font-body: "ReplaceBody", "Segoe UI", sans-serif;
}