:root {
    color-scheme: light;

    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --color-canvas: #f7f8f5;
    --color-canvas-muted: #eef3ee;
    --color-surface: #ffffff;
    --color-surface-raised: #fbfcf8;
    --color-ink: #18201c;
    --color-ink-soft: #3b4741;
    --color-muted: #65736c;
    --color-border: #dbe4dc;
    --color-border-strong: #bdcbbf;

    --color-brand: #167866;
    --color-brand-strong: #0d5e51;
    --color-brand-soft: #dff3eb;
    --color-accent: #d99b28;
    --color-accent-soft: #fff2c8;
    --color-info: #315ccf;
    --color-info-soft: #e2e9ff;
    --color-danger: #b84255;
    --color-danger-soft: #ffe5eb;
    --color-success: #14845f;
    --color-success-soft: #ddf5e8;

    --shadow-soft: 0 16px 40px rgba(35, 45, 39, 0.08);
    --shadow-hover: 0 20px 54px rgba(35, 45, 39, 0.14);
    --shadow-focus: 0 0 0 4px rgba(22, 120, 102, 0.16);

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --container: 1120px;
    --container-wide: 1280px;

    /* Compatibility aliases for legacy article HTML. */
    --primary-color: var(--color-brand);
    --primary-dark: var(--color-brand-strong);
    --secondary-color: var(--color-canvas-muted);
    --text-color: var(--color-ink);
    --text-light: var(--color-muted);
    --border-color: var(--color-border);
    --success-color: var(--color-success);
    --warning-color: var(--color-accent);
    --error-color: var(--color-danger);
    --shadow: var(--shadow-soft);
}

html.dark {
    color-scheme: dark;

    --color-canvas: #111512;
    --color-canvas-muted: #18201b;
    --color-surface: #1d2420;
    --color-surface-raised: #222b26;
    --color-ink: #f2f5ef;
    --color-ink-soft: #d7ded7;
    --color-muted: #a8b4ad;
    --color-border: #334139;
    --color-border-strong: #4b5d52;

    --color-brand: #52c4a8;
    --color-brand-strong: #78ddc3;
    --color-brand-soft: rgba(82, 196, 168, 0.16);
    --color-accent: #efbe55;
    --color-accent-soft: rgba(239, 190, 85, 0.16);
    --color-info: #8fa8ff;
    --color-info-soft: rgba(143, 168, 255, 0.16);
    --color-danger: #ff8da0;
    --color-danger-soft: rgba(255, 141, 160, 0.16);
    --color-success: #68d7a2;
    --color-success-soft: rgba(104, 215, 162, 0.16);

    --shadow-soft: 0 18px 46px rgba(0, 0, 0, 0.34);
    --shadow-hover: 0 24px 64px rgba(0, 0, 0, 0.42);
}