/* ============================================================
   GENERATED by ops/gen_web_tokens.py from design-system/tokens.json
   DO NOT EDIT — change tokens.json and re-run the generator.
   SoT: ios/BooksAndVocab/Models/AppColors|AppTheme|AppMetrics|AppFonts.swift
   Drift from iOS is guarded by ops/token_drift_check.py.
   ============================================================ */

:root, :host {
  /* --- theme-invariant: typography / space / radius / motion --- */
  --font-serif: 'Athelas', 'STSongti TC', 'Noto Serif TC', Georgia, serif;
  --font-sans: 'ElmsSans', 'PingFang TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-italic: 'CormorantGaramond', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  --font-display: 'CormorantGaramond', 'Athelas', 'Noto Serif TC', 'Songti TC', Georgia, serif;
  --text-hero: 40px;
  --text-h1: 28px;
  --text-h2: 22px;
  --text-body: 17px;
  --text-subhead: 15px;
  --text-caption: 12px;
  --text-caption2: 11px;
  --text-section-title: 18px;
  --text-detail-word: 27px;
  --text-row-word: 18px;
  --tracking-tight: -1.2px;
  --tracking-h2-tight: -0.65px;
  --tracking-normal: 0px;
  --tracking-wide: 0.3px;
  --tracking-uppercase: 0.8px;
  --leading-display: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.5;
  --leading-reading: 1.6;
  --leading-caption: 1.3;
  --sp-hairline: 1px;
  --sp-micro: 2px;
  --sp-tiny: 3px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-xs: var(--sp-1);
  --sp-sm: var(--sp-2);
  --sp-compact: var(--sp-3);
  --sp-md: var(--sp-4);
  --sp-lg: var(--sp-6);
  --sp-xl: var(--sp-7);
  --sp-xxl: var(--sp-9);
  --card-padding: 18px;
  --section-gap: 14px;
  --inline-gap: 8px;
  --sheet-padding: 24px;
  --page-h-padding: 20px;
  --divider-air: 16px;
  --chip-padding-h: 10px;
  --chip-padding-v: 5px;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-card: 8px;
  --radius-overlay: 8px;
  --radius-control: 6px;
  --radius-chip: 6px;
  --dur-quick: 0.15s;
  --dur-control: 0.14s;
  --dur-chip: 0.18s;
  --dur-progress: 0.1s;
  --dur-pulse: 1.4s;
  --ease-quick: ease-out;
  --ease-control: ease-out;
  --ease-chip: ease-out;
  --ease-linear: linear;
  --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --ease-follow: cubic-bezier(0.65, 0.0, 0.35, 1.0);
  --spring-standard: 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  --spring-emphasized: 0.35s cubic-bezier(0.33, 1, 0.68, 1);
  --spring-press: 0.25s cubic-bezier(0.33, 1, 0.68, 1);
  --spring-content-reveal: 0.35s cubic-bezier(0.33, 1, 0.68, 1);
  --spring-modal-swap: 0.45s cubic-bezier(0.33, 1, 0.68, 1);
  --motion-quick: 0.15s ease-out;
  --motion-control: 0.14s ease-out;
  --motion-chip: 0.18s ease-out;
  --motion-standard: 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  --motion-emphasized: 0.35s cubic-bezier(0.33, 1, 0.68, 1);
  --transition-content-swap: opacity 0.2s ease-out, transform 0.2s ease-out;
  --transition-panel-reveal: transform 0.3s ease-out, opacity 0.25s ease-out;
  --press-scale: 0.97;
  --press-opacity: 0.92;
  --swatch-light: #f7f6f3;
  --swatch-dark: #191919;
  --swatch-sepia: #f5f1eb;
  --blur-material: 12px;
  --toggle-size: 34px;
  --toggle-glyph: 15px;
}

:root, :host, [data-theme="light"] {
  --page-bg: #f7f6f3;
  --stage-bg: #fbfaf8;
  --card-bg: #ffffff;
  --elevated-card-bg: #ffffff;
  --card-border: rgba(0,0,0,0.09);
  --border-strong: rgba(0,0,0,0.16);
  --divider: rgba(0,0,0,0.06);
  --text-primary: #37352f;
  --text-secondary: #6b6a65;
  --text-tertiary: #8a8983;
  --text-quaternary: #9b9a93;
  --accent: #4d7396;
  --tag-fill: rgba(77,115,150,0.08);
  --brand-hero: #fcde9a;
  --on-brand-hero: #1c1a17;
  --accent-subtle: rgba(77,115,150,0.12);
  --success: #3b7a3b;
  --success-bg: rgba(59,122,59,0.1);
  --warning: #8c6014;
  --warning-bg: rgba(140,96,20,0.1);
  --destructive: #b5403a;
  --destructive-bg: rgba(181,64,58,0.1);
  --info: #4d7396;
  --info-bg: rgba(77,115,150,0.1);
  --muted-fill: rgba(0,0,0,0.04);
  --scrim: rgba(0,0,0,0.2);
  --tint: #37352f;
  --overlay-fill: rgba(255,255,255,0.12);
  --progress-track: rgba(0,0,0,0.07);
  --button-idle-fill: rgba(0,0,0,0.06);
  --button-pressed-fill: rgba(0,0,0,0.1);
  --vocab-highlight: linear-gradient(to top, hsla(212, 32%, 47%, 0.20) 35%, transparent 35%);
  --on-success: #ffffff;
  --elevation-z0: none;
  --elevation-z1: 0 1px 4px rgba(0, 0, 0, 0.03);
  --elevation-z2: 0 4px 10px rgba(0, 0, 0, 0.06);
  --elevation-z3: 0 8px 18px rgba(0, 0, 0, 0.1);
  --elevation-z4: 0 14px 28px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] {
  --page-bg: #191919;
  --stage-bg: #1f1f1f;
  --card-bg: #2c2c2c;
  --elevated-card-bg: #373737;
  --card-border: rgba(255,255,255,0.094);
  --border-strong: rgba(255,255,255,0.18);
  --divider: rgba(255,255,255,0.08);
  --text-primary: #e6e6e3;
  --text-secondary: #b3b3ae;
  --text-tertiary: #8c8c87;
  --text-quaternary: #6e6e69;
  --accent: #85a4c2;
  --tag-fill: rgba(133,164,194,0.18);
  --brand-hero: #fcde9a;
  --on-brand-hero: #1c1a17;
  --accent-subtle: rgba(133,164,194,0.18);
  --success: #6fb36f;
  --success-bg: rgba(111,179,111,0.14);
  --warning: #d9a441;
  --warning-bg: rgba(217,164,65,0.14);
  --destructive: #e0726b;
  --destructive-bg: rgba(224,114,107,0.14);
  --info: #85a4c2;
  --info-bg: rgba(133,164,194,0.14);
  --muted-fill: rgba(255,255,255,0.07);
  --scrim: rgba(0,0,0,0.42);
  --tint: #e6e6e3;
  --overlay-fill: rgba(255,255,255,0.15);
  --progress-track: rgba(255,255,255,0.1);
  --button-idle-fill: rgba(255,255,255,0.1);
  --button-pressed-fill: rgba(255,255,255,0.16);
  --vocab-highlight: linear-gradient(to top, hsla(210, 32%, 64%, 0.20) 35%, transparent 35%);
  --on-success: #1c1a17;
  --elevation-z0: none;
  --elevation-z1: 0 1px 4px rgba(0, 0, 0, 0.054);
  --elevation-z2: 0 4px 10px rgba(0, 0, 0, 0.108);
  --elevation-z3: 0 8px 18px rgba(0, 0, 0, 0.18);
  --elevation-z4: 0 14px 28px rgba(0, 0, 0, 0.288);
}

[data-theme="sepia"] {
  --page-bg: #f5f1eb;
  --stage-bg: #f7f4ee;
  --card-bg: #fbf9f4;
  --elevated-card-bg: #fcfaf5;
  --card-border: rgba(107,97,82,0.12);
  --border-strong: rgba(107,97,82,0.24);
  --divider: rgba(107,97,82,0.08);
  --text-primary: #38332b;
  --text-secondary: #756e61;
  --text-tertiary: #80786b;
  --text-quaternary: #999185;
  --accent: #4d7396;
  --tag-fill: rgba(77,115,150,0.08);
  --brand-hero: #fcde9a;
  --on-brand-hero: #1c1a17;
  --accent-subtle: rgba(77,115,150,0.12);
  --success: #3b7a3b;
  --success-bg: rgba(59,122,59,0.1);
  --warning: #8c6014;
  --warning-bg: rgba(140,96,20,0.1);
  --destructive: #b5403a;
  --destructive-bg: rgba(181,64,58,0.1);
  --info: #4d7396;
  --info-bg: rgba(77,115,150,0.1);
  --muted-fill: rgba(107,97,82,0.06);
  --scrim: rgba(76,66,51,0.2);
  --tint: #37352f;
  --overlay-fill: rgba(255,255,255,0.12);
  --progress-track: rgba(0,0,0,0.07);
  --button-idle-fill: rgba(0,0,0,0.07);
  --button-pressed-fill: rgba(0,0,0,0.12);
  --vocab-highlight: linear-gradient(to top, hsla(22, 28%, 55%, 0.22) 35%, transparent 35%);
  --on-success: #ffffff;
  --elevation-z0: none;
  --elevation-z1: 0 1px 4px rgba(0, 0, 0, 0.03);
  --elevation-z2: 0 4px 10px rgba(0, 0, 0, 0.06);
  --elevation-z3: 0 8px 18px rgba(0, 0, 0, 0.1);
  --elevation-z4: 0 14px 28px rgba(0, 0, 0, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root, :host {
    --dur-quick: 0.01ms;
    --dur-control: 0.01ms;
    --dur-chip: 0.01ms;
    --dur-progress: 0.01ms;
    --dur-pulse: 0.01ms;
    --spring-standard: 0.01ms;
    --spring-emphasized: 0.01ms;
    --spring-press: 0.01ms;
    --spring-content-reveal: 0.01ms;
    --spring-modal-swap: 0.01ms;
    --motion-quick: 0.01ms;
    --motion-control: 0.01ms;
    --motion-chip: 0.01ms;
    --motion-standard: 0.01ms;
    --motion-emphasized: 0.01ms;
  }
}