/* ============================================================
   Twilight Garden — design tokens + self-hosted fonts.
   See docs/design_language.md. This file is INERT: it only
   declares CSS custom properties + @font-face, so it is safe
   to link on EVERY page (no selector collisions). The base
   resets + components live in styles.css (opt-in per page).
   Fonts are self-hosted (assets/fonts/*.woff2) — no CDN.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 340 600;          /* variable wght axis */
  font-display: swap;
  src: url('fonts/fraunces.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;          /* variable wght axis */
  font-display: swap;
  src: url('fonts/hanken-grotesk.woff2') format('woff2');
}

:root {
  /* type */
  --font-display: 'Fraunces', 'Hoefler Text', Georgia, serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont,
               'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-num: ui-monospace, 'SF Mono', Menlo, monospace;

  /* core palette (light page, dark plum header) */
  --paper:       #faf3ee;
  --paper-2:     #fffaf6;
  --card:        #ffffff;
  --ink:         #3a2230;
  --ink-soft:    #8a6b7a;
  --rule:        #f0d4e0;
  --plum:        #4a2a3f;
  --plum-deep:   #6b2548;
  --rose:        #b8395f;
  --blush:       #e89ab4;
  --pink-wash:   #fde7f0;
  --pink-wash-2: #fff5f9;
  --gilt:        #c89e3c;
  --gilt-soft:   #e7d6a8;
  --leaf:        #3a6b2a;
  --peach:       #e89b6f;

  /* semantic — rarity (canonical; frame colors per flower_rarity.py:
     1 green .. 5 red). Pair each with a ~12% tint for chip backgrounds. */
  /* Matched to the in-game rarity filter buttons (凡/普/珍/華/仙) sampled from
     the live catalog: green / sky-blue / violet / orange / coral-red. The
     raw button fills are neon (#c6ee75 #73d7ee #a279fb #f49833 #fc4c62) —
     kept the hues but tuned a touch darker so they read as gem/chip text. */
  --rarity-1: #6fae3a; --rarity-1-bg: rgba(111,174,58,.15);
  --rarity-2: #2ea6d8; --rarity-2-bg: rgba(46,166,216,.15);
  --rarity-3: #8257ee; --rarity-3-bg: rgba(130,87,238,.15);
  --rarity-4: #ef8e22; --rarity-4-bg: rgba(239,142,34,.16);
  --rarity-5: #f04a60; --rarity-5-bg: rgba(240,74,96,.15);

  /* semantic — state & region */
  --state-free:    var(--leaf);
  --state-gated:   var(--gilt);
  --region-global: #3f7a99;
  --region-cn:     #8a1538;

  /* nav-on-plum — the header band is dark plum, so its links must stay
     light (they can't map to --rose, which is tuned for light surfaces).
     Consumed by site_layout.SITE_NAV_CSS so the chrome is tokenized in one
     place. */
  --nav-link:       #f7c8de;
  --nav-link-label: #c98aa8;
  --nav-current:    #ffffff;

  /* shape / depth */
  --r-card:  12px;
  --r-panel: 16px;
  --r-pill:  999px;
  --r-badge: 6px;
  --shadow-1: 0 1px 3px rgba(74,42,63,.08);
  --shadow-2: 0 8px 26px rgba(74,42,63,.14);

  /* legacy aliases — keep the names the existing styles.css / news pages
     already reference so nothing breaks while pages migrate. */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--ink-soft);
  --accent: var(--plum);
  --accent-light: var(--plum-deep);
  --header-fg: #fde4ef;
  --tag-bg: var(--pink-wash);
  --tag-fg: var(--plum-deep);
  --max: 880px;
}