/* =================================================== HSK4 HSK Prep — Shared Styles common.css Mobile-first responsive design system. Breakpoints: sm 480, md 768, lg 1024 (used as min-width). =================================================== */ /* === DESIGN TOKENS === */ :root { /* Warm parchment — platform palette (landing page uses landing.css) */ --ink: #1a1614; --paper: #f9f4ec; --accent: #b84e2e; --accent-hover: #9a4026; --accent-soft: #f3e0d8; --accent-btn: #b84e2e; --accent-btn-hover: #9a4026; --jade: #2f6349; --jade-soft: #d8ebe1; --gold: #8a6420; --gold-soft: #f5ead0; --mist: #d4c9bc; --stone: #574f49; --correct: #2f6349; --wrong: #b84e2e; /* Semantic surfaces */ --surface: #fffdf8; --surface-sunken: #efe6d9; --invert-bg: #1a1614; --invert-fg: #f9f4ec; --ok-bg: #e4f0e8; --ok-border: #4a8f6a; --ok-ink: #2f6a4f; --bad-bg: #f8e4dc; --bad-bg-2: #faf0ec; --bad-ink: #b84a2e; --accent-tint: #faf3ee; --gold-border: #e0cfa8; --border-subtle: rgba(44, 40, 37, 0.12); /* Radius & elevation */ --radius: 12px; --radius-sm: 8px; --shadow: 0 8px 28px rgba(44, 40, 37, 0.07); --shadow-lg: 0 16px 44px rgba(44, 40, 37, 0.1); /* Spacing scale (4px base) */ --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Fluid typography — interpolates 320px viewport -> 1440px viewport. Each token genuinely flows (2-6px gain), not stuck at one bound. All bounds in rem so users with non-default browser font-size get scaled values (WCAG 1.4.4 / SC Resize text). */ --fs-xs: clamp(0.6875rem, calc(0.69rem + 0.09vw), 0.75rem); --fs-sm: clamp(0.75rem, calc(0.71rem + 0.18vw), 0.875rem); --fs-base: clamp(0.875rem, calc(0.84rem + 0.18vw), 1rem); --fs-md: clamp(0.9375rem, calc(0.88rem + 0.27vw), 1.125rem); --fs-lg: clamp(1.0625rem, calc(1rem + 0.27vw), 1.25rem); --fs-xl: clamp(1.25rem, calc(1.18rem + 0.36vw), 1.5rem); --fs-2xl: clamp(1.375rem, calc(1.27rem + 0.54vw), 1.75rem); --fs-h1: clamp(1.625rem, calc(1.375rem + 1.25vw), 2.5rem); /* Layout */ --container: 900px; --header-h: 56px; --tap: 44px; /* min touch target */ } /* === DARK THEME === Applied when is set (by the no-flash loader in each page's , honouring a saved choice or the OS preference). Only re-maps the color tokens above — every component inherits the new palette through the variables, so light mode stays byte-identical. */ [data-theme="dark"] { --ink: #faf6f0; --paper: #141210; --accent: #e8886a; --accent-hover: #d47558; --accent-soft: #3d2c26; --accent-btn: #e8886a; --accent-btn-hover: #d47558; --jade: #6bc497; --jade-soft: #1c2e26; --gold: #e0b85a; --gold-soft: #2c2618; --mist: #4a443c; --stone: #b8afa6; --correct: #6bc497; --wrong: #e8886a; --surface: #262219; --surface-sunken: #302c24; --invert-bg: #302c24; --invert-fg: #faf6f0; --ok-bg: #1e2e26; --ok-border: #3a6b52; --ok-ink: #5daf87; --bad-bg: #3a2a24; --bad-bg-2: #2e221c; --bad-ink: #f0a088; --accent-tint: #2a221e; --gold-border: #4a3d20; --border-subtle: rgba(255, 255, 255, 0.1); --shadow: 0 20px 64px rgba(0, 0, 0, 0.35); --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.45); color-scheme: dark; } [data-theme="dark"] .btn-primary { color: #fff; border-color: rgba(255, 255, 255, 0.12); } /* === READABLE SURFACES === Page-specific