/* Shared by the React learner and the existing HTML workbench. Legacy names
   are aliases: this file owns the brand, typography and component scales. */
:root {
  color-scheme: light;
  --color-brand-600: #6268ac;
  --color-brand-700: #505694;
  --color-brand-100: #ecedfa;
  --color-page: #f6f6fb;
  --color-surface: #fff;
  --color-text: #292d42;
  --color-text-muted: #626b81;
  --color-border: #e7e8f1;
  --color-accent-warm: #d9a18d;
  --color-success: #276348;
  --color-warning: #855416;
  --color-warning-surface: #fff3bf;
  --color-danger: #a33340;
  --font-ui: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --radius-control: 12px; --radius-card: 20px; --radius-panel: 24px;
  --shadow-surface: 0 10px 32px rgba(79, 82, 145, .065);
  --content-width: 1280px;
  --font-mobile-title: 18px;
  --font-mobile-section: 16px;
  --font-mobile-word: 16px;
  --font-mobile-yue: 14px;
  --font-mobile-copy: 13px;
  --font-mobile-nav: 12px;
  --font-mobile-jyutping: 11px;
  --color-warm-ink: #a76e57;
  --ink: var(--color-text); --muted: var(--color-text-muted);
  --paper: var(--color-page); --card: var(--color-surface); --line: var(--color-border);
  --green: var(--color-brand-600); --green2: var(--color-brand-100);
  --gold: var(--color-accent-warm); --red: var(--color-danger); --shadow: var(--shadow-surface);
  --soft-accent: var(--color-brand-600); --soft-accent-dark: var(--color-brand-700);
  --soft-accent-wash: var(--color-brand-100); --soft-peach: #e9b8a4; --soft-peach-wash: #fbf0eb;
  --wb-font: var(--font-ui); --wb-bg: var(--color-page); --wb-ink: var(--color-text);
  --wb-muted: var(--color-text-muted); --wb-accent: var(--color-brand-600);
  --wb-dark: var(--color-brand-700); --wb-wash: var(--color-brand-100);
  --wb-line: var(--color-border); --wb-shadow: var(--shadow-surface);
  --wb-card-radius: var(--radius-panel); --wb-control-radius: var(--radius-control);
}