/* 1000H French — shared design tokens. See DESIGN_SYSTEM.md. */
:root {
    color-scheme: light;
    --page: #f5f7fb;
    --surface: #ffffff;
    --surface-subtle: #f8fafd;
    --surface-muted: #eef2f8;
    --ink: #243449;
    --muted: #5e6e84;
    --placeholder: #5e6e84;
    --line: #dce3ed;
    --line-strong: #b3c0d2;
    --primary: #345b8c;
    --primary-rgb: 52, 91, 140;
    --primary-hover: #294b76;
    --primary-soft: #eaf1fa;
    --primary-line: #b8cbe2;
    --primary-contrast: #ffffff;
    --focus-ring: rgba(var(--primary-rgb), 0.2);
    /* Mist blue for secondary emphasis. Green only means right / done, in small marks. */
    --accent: #476f8c;
    --accent-soft: #edf4fa;
    --accent-line: #b9cedf;
    --danger: #a94e58;
    --danger-soft: #fbf1f2;
    --danger-line: #e1b9bf;
    --success: #2b7a4b;
    --success-rgb: 43, 122, 75;
    --success-soft: #edf6f0;
    --success-line: #b8dac4;
    --success-highlight: #a8d6b8;
    --shadow: 0 2px 8px rgba(32, 40, 46, 0.04);
    --shadow-overlay: 0 16px 48px rgba(32, 40, 46, 0.16);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 20px;
    --text-title: 30px;
    --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
}

/* Applied before first paint by theme.js; one palette for every learning page. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --page: #141a23;
    --surface: #1b2430;
    --surface-subtle: #202b38;
    --surface-muted: #273444;
    --ink: #d5deea;
    --muted: #a5b4c7;
    --placeholder: #a5b4c7;
    --line: #354357;
    --line-strong: #697e99;
    --primary: #91b5e6;
    --primary-rgb: 145, 181, 230;
    --primary-hover: #a5c3ed;
    --primary-soft: #26384e;
    --primary-line: #526f94;
    --primary-contrast: #141a23;
    --focus-ring: rgba(var(--primary-rgb), 0.25);
    --accent: #a3bfd3;
    --accent-soft: #263744;
    --accent-line: #536f83;
    --danger: #eca1a9;
    --danger-soft: #3b2933;
    --danger-line: #855b68;
    --success: #8dcca5;
    --success-rgb: 141, 204, 165;
    --success-soft: #23382f;
    --success-line: #517561;
    --success-highlight: #a8d6b8;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.35);
}
html { background: var(--page); }