/* ================================================================
   天喜 TIANXI · Design Tokens (SSOT)
   Extracted from v3-flagship · single source for all pages
   ================================================================ */
:root {
  /* ink & paper */
  --ink:        #0B0B0B;
  --ink-soft:   #2A2A28;
  --ink-mute:   #5F5C52;
  --ink-faint:  #726D5C;
  --paper:      #FDFBF5;
  --paper-2:    #F5F1E4;
  --paper-3:    #EDE7D4;
  --rule:       rgba(11,11,11,0.08);
  --rule-2:     rgba(11,11,11,0.14);
  --ticker-bg:  #0B1612;
  --ticker-fg:  #F0EBDD;

  /* brand — 紅綠啡金 四大主色 */
  --green:      #00843D;
  --green-2:    #3BBF7A;
  --red:        #C8102E;
  --red-2:      #E6435A;
  --brown:      #5C3A1E;
  --brown-2:    #8B5A2B;
  --tan:        #D4B78A;
  --tan-2:      #B9986A;
  --gold:       #B8912F;
  --gold-2:     #D4A11E;
  --gold-3:     #F5D77A;
  --gold-tint:  #FBF1D2;
  --blue:       #003DA5;

  /* semantic: 綠跌紅升 (HK racing convention — OPPOSITE of western stock) */
  --odds-up:    var(--red);
  --odds-down:  var(--green);

  /* ── AI 推介五行色系 · 順生（金→水→木→火→土）──
     每階 3 個 stops：fg=字色 · bg-hi=漸變亮端 · bg-lo=漸變暗端 · ring=外框
     底色刻意用淺色 + 3D 立體漸變，確保深色字唔會融入背景 */
  --pick1-fg: #7A5A0C; --pick1-hi: #FFF3CB; --pick1-lo: #E8C766; --pick1-ring: #C9A227;   /* 金 · Metal */
  --pick2-fg: #0B3A85; --pick2-hi: #E4EDFB; --pick2-lo: #93B6E8; --pick2-ring: #2F62B5;   /* 水 · Water */
  --pick3-fg: #1E5A2F; --pick3-hi: #E3F3DE; --pick3-lo: #8FCC98; --pick3-ring: #3F9357;   /* 木 · Wood */
  --pick4-fg: #7C1020; --pick4-hi: #FCE4E4; --pick4-lo: #EC9AA2; --pick4-ring: #C8102E;   /* 火 · Fire */
  --pick5-fg: #4A2D14; --pick5-hi: #F2E6D3; --pick5-lo: #C9A77A; --pick5-ring: #8B5A2B;   /* 土 · Earth */

  /* typography */
  --font-display: "Noto Serif TC", "Source Han Serif TC", "Songti SC", Georgia, serif;
  --font-body:    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-italic:  "Instrument Serif", Georgia, serif;

  /* spacing scale (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;

  /* radii */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;

  /* shadows */
  --sh-xs: 0 1px 0 var(--rule);
  --sh-sm: 0 1px 2px rgba(11,11,11,0.04), 0 2px 8px -4px rgba(11,11,11,0.06);
  --sh-md: 0 2px 4px rgba(11,11,11,0.04), 0 10px 24px -8px rgba(11,11,11,0.10);
  --sh-lg: 0 40px 100px -30px rgba(0,0,0,0.25), 0 20px 40px -20px rgba(0,0,0,0.15);
}

/* Dark mode (auto-switch + manual via [data-theme=dark]) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --ink:        #F0EBDD;
    --ink-soft:   #D4CFC0;
    --ink-mute:   #9A9382;
    --ink-faint:  #7A7363;
    --paper:      #0B1612;
    --paper-2:    #14201B;
    --paper-3:    #1E2A25;
    --rule:       rgba(240,235,221,0.08);
    --rule-2:     rgba(240,235,221,0.14);
    --ticker-bg:  #050A08;
    --green:      #3BBF7A;
    --red:        #E6435A;
  }
}
:root[data-theme=dark] {
  /* ⚠️ 2026-04-26 brightened for legibility — user reported dark tones too dim */
  --ink:        #FAF6E8;   /* was #F0EBDD */
  --ink-soft:   #E8E2D0;   /* was #D4CFC0 */
  --ink-mute:   #BDB6A3;   /* was #9A9382 — bumped ~15% */
  --ink-faint:  #989182;   /* was #7A7363 — bumped ~20% */
  --paper:      #0B1612;
  --paper-2:    #14201B;
  --paper-3:    #1E2A25;
  --rule:       rgba(250,246,232,0.12);
  --rule-2:     rgba(250,246,232,0.20);
  --ticker-bg:  #050A08;
  --green:      #3BBF7A;
  --red:        #E6435A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --ink:      #FAF6E8;
    --ink-soft: #E8E2D0;
    --ink-mute: #BDB6A3;
    --ink-faint:#989182;
    --rule:     rgba(250,246,232,0.12);
    --rule-2:   rgba(250,246,232,0.20);
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-weight: 400;
  line-height: 1.5;
  overscroll-behavior-y: contain;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd { margin: 0; padding: 0; }
ul,ol { list-style: none; }

/* Tabular nums for data */
.num, .tnum, [data-num], .horse-num, .rank-tile,
[class*="odds"], [class*="elo"], time
{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }