/* ============================================================
   苏羊国际象棋俱乐部 · Suyang Chess Club — Design Tokens
   Colors + Typography foundation
   Brand: 智慧蓝 Wisdom Blue (#185FA5) · 冠军金 Champion Gold (#EF9F27)
   Voice: warm, playful, childlike — for kids 4–12 and their parents
   ============================================================ */

/* ---- Webfonts ------------------------------------------------
   Brand faces are now SELF-HOSTED from /fonts (user-supplied):
   - Display (zh): 站酷快乐体 ZCOOL KuaiLe 开源版 — bouncy, kid-friendly
   - Body (zh):    阿里巴巴普惠体 3.0 Alibaba PuHuiTi 3 (Regular/Medium/Bold)
   Latin faces stay on Google Fonts CDN (not brand-owned, fine to deliver via CDN):
   - Display (latin): Baloo 2 — rounded, chunky
   - Body (latin):    Nunito — soft, rounded grotesque
   - Noto Sans SC kept as a zh fallback; Noto Sans Symbols 2 for chess glyphs.
-------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Sans+Symbols+2&display=swap');

/* Self-hosted brand fonts */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  src: url('fonts/ZCOOLKuaiLe.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3';
  src: url('fonts/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3';
  src: url('fonts/AlibabaPuHuiTi-3-65-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3';
  src: url('fonts/AlibabaPuHuiTi-3-85-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ========== BRAND CORE ========== */
  --wisdom-blue: #185FA5;     /* primary */
  --champion-gold: #EF9F27;   /* accent  */

  /* ========== BLUE SCALE (智慧蓝) ========== */
  --blue-900: #0C3A68;
  --blue-800: #0E477E;
  --blue-700: #134E89;
  --blue-600: #185FA5;   /* = primary */
  --blue-500: #2A78C2;
  --blue-400: #5598D4;
  --blue-300: #87B6E0;
  --blue-200: #B9D5EE;
  --blue-100: #DCEAF6;
  --blue-50:  #EEF5FB;

  /* ========== GOLD SCALE (冠军金) ========== */
  --gold-800: #A9650C;
  --gold-700: #C97D12;
  --gold-600: #EF9F27;   /* = accent */
  --gold-500: #F4B046;
  --gold-400: #F7C36E;
  --gold-300: #FAD697;
  --gold-200: #FCE6BE;
  --gold-100: #FDF1DB;
  --gold-50:  #FEF8EE;

  /* ========== WARM NEUTRALS (paper / ink) ========== */
  --ink:      #2E2A26;   /* primary text — warm near-black */
  --ink-soft: #4A3526;   /* mascot outline brown, headings on cream */
  --text-2:   #6B6258;   /* secondary text */
  --text-3:   #9C9388;   /* tertiary / captions */
  --line:     #ECE3D4;   /* hairline borders on cream */
  --line-2:   #DCD2C0;   /* stronger border */
  --cream:    #FBF6EC;   /* default page background */
  --ivory:    #FFFCF5;   /* card / raised surface */
  --paper:    #FFFFFF;   /* pure white surface */

  /* ========== MASCOT / PLAYFUL ACCENTS ========== */
  --wool:     #FBF3E4;   /* lamb wool cream */
  --pink:     #F2929C;   /* nose / accent pink */
  --blush:    #F9C9CE;   /* cheek blush, soft fills */
  --pink-50:  #FDEEF0;

  /* ========== CHESS BOARD ========== */
  --square-light: #F4E7CC;  /* warm light square */
  --square-dark:  #C99A5B;  /* warm tan dark square */

  /* ========== SEMANTIC ========== */
  --success: #3FA66A;
  --success-bg: #E6F4EC;
  --warning: #F2741F;
  --warning-bg: #FCEADB;
  --error: #E05B52;
  --error-bg: #FBE9E7;
  --info: #2A78C2;
  --info-bg: #DCEAF6;

  /* ========== RADII ========== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ========== SHADOWS (soft, warm, no harsh black) ========== */
  --shadow-sm: 0 1px 2px rgba(74,53,38,.06), 0 2px 6px rgba(74,53,38,.06);
  --shadow-md: 0 4px 12px rgba(24,95,165,.10), 0 2px 4px rgba(74,53,38,.06);
  --shadow-lg: 0 12px 32px rgba(24,95,165,.16), 0 4px 10px rgba(74,53,38,.08);
  --shadow-gold: 0 6px 18px rgba(239,159,39,.32);
  --shadow-blue: 0 6px 18px rgba(24,95,165,.30);
  /* chunky "kid sticker" bottom shadow for primary buttons */
  --press-blue: 0 4px 0 var(--blue-800);
  --press-gold: 0 4px 0 var(--gold-800);

  /* ========== SPACING (4px base) ========== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ========== TYPE FAMILIES ========== */
  --font-display: 'Baloo 2', 'ZCOOL KuaiLe', system-ui, sans-serif;
  --font-body: 'Nunito', 'Alibaba PuHuiTi 3', 'Noto Sans SC', system-ui, sans-serif;
  --font-zh-display: 'ZCOOL KuaiLe', 'Baloo 2', system-ui, sans-serif;
  --font-zh-body: 'Alibaba PuHuiTi 3', 'Noto Sans SC', system-ui, sans-serif;

  /* ========== TYPE SCALE ========== */
  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 23px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
}

/* ============================================================
   SEMANTIC TYPE ELEMENTS
   ============================================================ */
.sy-display {
  font-family: var(--font-zh-display);
  font-size: var(--fs-display);
  line-height: 1.08;
  color: var(--wisdom-blue);
  letter-spacing: .5px;
}
.sy-h1 {
  font-family: var(--font-zh-display);
  font-size: var(--fs-h1);
  line-height: 1.15;
  color: var(--ink);
}
.sy-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--ink);
}
.sy-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--ink);
}
.sy-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-2);
}
.sy-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
}
.sy-sm {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
}
.sy-caption {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
}
.sy-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--champion-gold);
}