/* HSK Passport design tokens · generated from tokens.json */
:root {
  /* color · surfaces */
  --hsk-bg: #F5F0E8;
  --hsk-card: #FFFDF9;
  --hsk-panel: #EFE9DD;
  --hsk-line: #E5DED2;
  /* color · text */
  --hsk-text: #1F1D1A;
  --hsk-text-2: #6B665E;
  /* color · brand */
  --hsk-primary: #3B3FA8;
  --hsk-primary-light: #E6E7F5;
  --hsk-sound: #B8541A;
  --hsk-sound-light: #F6E6DA;
  /* color · status */
  --hsk-ok: #2E7D4F;
  --hsk-ok-light: #E1F0E6;
  --hsk-err: #C0392B;
  --hsk-err-light: #F7E1DE;
  --hsk-warn: #B8710A;
  --hsk-warn-light: #F8ECD3;
  --hsk-focus: #E0B400;

  /* font */
  --hsk-font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --hsk-font-content: 'Noto Serif SC', 'Songti SC', serif;

  /* type · mobile defaults */
  --hsk-fs-word-large: 60px;
  --hsk-fs-word-chip: 17px;
  --hsk-fs-h1: 26px;
  --hsk-fs-body: 15px;
  --hsk-fs-caption: 13px;
  --hsk-fs-pinyin: 18px;
  --hsk-fs-disclaimer: 11px;
  --hsk-fs-countdown: 52px;
  --hsk-fw-regular: 400;
  --hsk-fw-medium: 500;
  --hsk-fw-semibold: 600;
  --hsk-fw-bold: 700;

  /* radius */
  --hsk-radius-card: 14px;
  --hsk-radius-button: 12px;
  --hsk-radius-option: 12px;
  --hsk-radius-chip: 9px;
  --hsk-radius-kbd: 5px;

  /* space */
  --hsk-space-1: 8px;
  --hsk-space-2: 16px;
  --hsk-space-3: 24px;
  --hsk-space-4: 32px;
  --hsk-space-5: 40px;
  --hsk-card-pad: 16px;
  --hsk-page-pad: 20px;

  /* size */
  --hsk-hit-min: 44px;
  --hsk-option-min: 52px;
  --hsk-cta-h: 52px;
  --hsk-topbar-h: 52px;
  --hsk-tabbar-h: 74px;
  --hsk-tab-safe: 26px;
  --hsk-sidebar-w: 232px;
  --hsk-right-panel-w: 380px;
  --hsk-content-max: 720px;
  --hsk-venn-w: 200px;
  --hsk-venn-h: 110px;

  /* motion */
  --hsk-dur-fast: 200ms;
  --hsk-dur-progress: 300ms;
  --hsk-dur-skeleton: 1200ms;
  --hsk-dur-panel-swap: 900ms;
  --hsk-ease: ease-out;
  --hsk-scale-correct: 1.02;

  /* elevation */
  --hsk-shadow: none;

  color-scheme: light;
}

/* desktop ≥1024 */
@media (min-width: 1024px) {
  :root {
    --hsk-fs-word-large: 72px;
    --hsk-fs-word-chip: 16px;
    --hsk-fs-h1: 28px;
    --hsk-fs-body: 14px;
    --hsk-fs-pinyin: 19px;
    --hsk-card-pad: 20px;
    --hsk-page-pad: 40px;
    --hsk-cta-h: 48px;
    --hsk-option-min: 56px;
    --hsk-venn-w: 240px;
    --hsk-venn-h: 130px;
  }
}

/* dark */
:root[data-theme="dark"] {
  --hsk-bg: #1A1917;
  --hsk-card: #23211D;
  --hsk-panel: #1F1E1A;
  --hsk-line: rgba(255, 255, 255, 0.08);
  --hsk-text: #ECE7DE;
  --hsk-text-2: #A9A399;
  --hsk-primary-light: #2A2C55;
  --hsk-sound-light: #3A2A1F;
  --hsk-ok-light: #1F3A2B;
  --hsk-err-light: #3E1F1B;
  --hsk-warn-light: #3A2E15;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hsk-bg: #1A1917;
    --hsk-card: #23211D;
    --hsk-panel: #1F1E1A;
    --hsk-line: rgba(255, 255, 255, 0.08);
    --hsk-text: #ECE7DE;
    --hsk-text-2: #A9A399;
    --hsk-primary-light: #2A2C55;
    --hsk-sound-light: #3A2A1F;
    --hsk-ok-light: #1F3A2B;
    --hsk-err-light: #3E1F1B;
    --hsk-warn-light: #3A2E15;
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hsk-dur-fast: 0ms;
    --hsk-dur-progress: 0ms;
    --hsk-dur-skeleton: 0ms;
    --hsk-dur-panel-swap: 0ms;
    --hsk-scale-correct: 1;
  }
}