/* ============================================================
   SHAOYAO MANDARIN — Design Tokens
   Colors + Typography foundations for the Mandarin bootcamp brand.
   "Modern Chinese": deep ink-greens, white serif, peony + seal motifs.
   ------------------------------------------------------------
   Fonts are loaded from Google Fonts (see @import below). These are
   CLOSE SUBSTITUTES for the brand's display/body serifs — flagged to
   the user. Swap @font-face here if the real licensed files arrive.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;1,8..60,400&family=Manrope:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

/* Brand brush face — self-hosted (uploaded by user). Used for 陆子龙 / 芍药 calligraphy. */
@font-face {
  font-family: 'Zhi Mang Xing';
  src: url('fonts/ZhiMangXing-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ---------- BRAND CORE ---------- */
  --ink:        #053734;   /* 墨绿 — Forest Ink. Primary brand surface. */
  --petrol:     #013F48;   /* Deep petrol-teal. Alt dark surface. */
  --pine:       #225658;   /* Muted pine. Buttons/fills on dark. */
  --teal:       #26717C;   /* Living teal. Primary interactive / links. */
  --teal-bright:#2E8794;   /* Hover lift of teal. */
  --slate:      #223F57;   /* Slate-navy. Calligraphy plate / cool surface. */

  /* ---------- ACCENTS (Chinese motifs — use sparingly) ---------- */
  --cinnabar:   #C0362C;   /* 朱红 seal red. Tags, seals, alerts. */
  --cinnabar-d: #9E2A22;
  --brass:      #C9A24B;   /* 金 brass. Fine rules, certificates, premium. */

  /* ---------- NEUTRALS ---------- */
  --white:      #FFFFFF;
  --paper:      #F6F4EF;   /* Warm rice-paper. Default light surface. */
  --mist:       #E9EAEC;   /* Cool grey band (client logos / sections). */
  --line:       #DCDED9;   /* Hairline on light. */
  --line-dk:    rgba(255,255,255,.14); /* Hairline on dark. */

  /* ---------- TEXT ---------- */
  --fg1:        #053734;   /* Primary text on light. */
  --fg2:        #3B4A47;   /* Body text on light. */
  --fg3:        #6C7A77;   /* Muted / captions on light. */
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  rgba(255,255,255,.78);
  --fg-on-dark-3:  rgba(255,255,255,.55);

  /* ---------- TYPE FAMILIES ---------- */
  --serif-display: 'Newsreader', 'Noto Serif SC', Georgia, serif;  /* modern editorial serif */
  --serif-body:    'IBM Plex Sans', system-ui, 'Segoe UI', sans-serif; /* tech-oriented body (kept var name) */
  --sans:          'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hanzi:         'Noto Serif SC', 'Source Serif 4', serif;       /* Chinese characters */
  --hanzi-brush:   'Zhi Mang Xing', 'Noto Serif SC', cursive;      /* decorative brush (self-hosted) */
  --pinyin:        'Source Serif 4', 'Manrope', serif;             /* tone marks supported */

  /* ---------- TYPE SCALE (fluid-ish, px) ---------- */
  --t-display: 76px;  /* hero display, Newsreader */
  --t-h1:      52px;
  --t-h2:      38px;
  --t-h3:      27px;
  --t-h4:      21px;
  --t-lead:    21px;  /* intro paragraph */
  --t-body:    17px;
  --t-small:   15px;
  --t-cap:     13px;  /* caption / eyebrow */

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --r-app: 22%;       /* peony app-icon squircle ratio */

  /* ---------- SPACING (8pt base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --sh-sm: 0 1px 2px rgba(5,55,52,.08), 0 1px 3px rgba(5,55,52,.06);
  --sh-md: 0 4px 12px rgba(5,55,52,.10), 0 2px 4px rgba(5,55,52,.06);
  --sh-lg: 0 14px 40px rgba(5,55,52,.16), 0 4px 10px rgba(5,55,52,.08);
  --sh-card: 0 1px 0 rgba(5,55,52,.04), 0 10px 30px rgba(5,55,52,.10);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);     /* gentle ease-out */
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Apply .ds-display etc., or copy the rules into component CSS.
   ============================================================ */
.ds-eyebrow {
  font-family: var(--sans);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ds-display {
  font-family: var(--serif-display);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.01em;
}
.ds-h1 { font-family: var(--serif-display); font-size: var(--t-h1); font-weight: 500; line-height: 1.06; letter-spacing: -.01em; }
.ds-h2 { font-family: var(--serif-display); font-size: var(--t-h2); font-weight: 500; line-height: 1.12; }
.ds-h3 { font-family: var(--serif-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.2; }
.ds-h4 { font-family: var(--sans); font-size: var(--t-h4); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.ds-lead { font-family: var(--serif-body); font-size: var(--t-lead); font-weight: 400; line-height: 1.55; }
.ds-body { font-family: var(--serif-body); font-size: var(--t-body); font-weight: 400; line-height: 1.7; }
.ds-ui   { font-family: var(--sans); font-size: var(--t-body); font-weight: 500; line-height: 1.5; }
.ds-small{ font-family: var(--sans); font-size: var(--t-small); font-weight: 500; line-height: 1.5; }
.ds-hanzi{ font-family: var(--hanzi); }
.ds-pinyin{ font-family: var(--pinyin); font-style: italic; color: var(--teal); }
.ds-brush{ font-family: var(--hanzi-brush); }