/* Chu Business · BusyBoss.org — Design Tokens (dark business theme) */
:root {
  /* Surfaces */
  --cb-bg: #0B1220;          /* page background */
  --cb-surface: #121B2E;     /* cards, panels, header */
  --cb-surface-2: #0F172A;   /* inputs, inset tiles */
  --cb-surface-3: #1A2540;   /* hover, muted fills */
  --cb-line: #263352;        /* default border */
  --cb-line-soft: #1E2A44;   /* dividers inside cards */

  /* Ink */
  --cb-ink: #E6ECF7;         /* primary text */
  --cb-ink-2: #A3B0C9;       /* secondary text */
  --cb-ink-3: #6F7D99;       /* captions, eyebrows */
  --cb-ink-disabled: #3A4664;

  /* Primary · blue (actions, selection, nav active, AI badge) */
  --cb-blue: #3B82F6;
  --cb-blue-hover: #2F6FE0;
  --cb-blue-soft: #1D3A6E;   /* selected chip / tab background */
  --cb-blue-ink: #9CC1FF;    /* text on blue-soft; pinyin */
  --cb-blue-link: #6FA4FF;   /* links, arrows */

  /* Amber · paid / unlock / price */
  --cb-amber: #F2B33D;
  --cb-amber-soft: #3D2E12;
  --cb-amber-ink: #1A1200;   /* text on amber button */

  /* Green · free / success / pronunciation */
  --cb-green: #34C78A;
  --cb-green-soft: #113427;
  --cb-green-ink: #06201A;

  /* Purple · components (构件) / textbooks */
  --cb-purple: #A78BFA;
  --cb-purple-soft: #2A2350;

  /* Character-type colour code (Visual Chinese cards) */
  --cb-type-phono: #E05A3A;  /* 形声 phono-semantic */
  --cb-type-ideo:  #34C78A;  /* 会意 ideographic */
  --cb-type-single:#6FA4FF;  /* 独体 single-body */

  /* Typography */
  --cb-font-ui: 'Manrope', 'Noto Sans SC', system-ui, sans-serif;
  --cb-font-cjk-display: 'Noto Serif SC', 'Noto Sans SC', serif;   /* big hanzi, lesson titles */
  --cb-font-components: 'KaiXinSong', 'BabelStone Han', 'Noto Serif SC', serif; /* PUA components from HanziPeek */

  --cb-text-xs: 11px;  --cb-text-sm: 12.5px; --cb-text-base: 15px; --cb-text-lg: 17px;
  --cb-h3: 20px; --cb-h2: 22px; --cb-h1: 30px; --cb-display: clamp(30px, 4.2vw, 50px);
  --cb-hanzi-tile: 30px; --cb-hanzi-card: 64px; --cb-hanzi-cover: 84px;

  /* Radii */
  --cb-r-sm: 7px; --cb-r-md: 10px; --cb-r-lg: 14px; --cb-r-xl: 16px; --cb-r-pill: 999px;

  /* Spacing (4px grid) */
  --cb-s-1: 4px; --cb-s-2: 8px; --cb-s-3: 12px; --cb-s-4: 16px; --cb-s-5: 20px; --cb-s-6: 24px; --cb-s-8: 32px; --cb-s-10: 40px;

  /* Layout */
  --cb-container: 1200px; --cb-gutter: 20px; --cb-header-h: 62px; --cb-sticky-top: 80px;

  /* Elevation */
  --cb-shadow-float: 0 10px 30px rgba(0,0,0,.4);
  --cb-shadow-widget: 0 20px 60px rgba(0,0,0,.4);
}