:root {
    /* Colors — Light: JACS labnote */
    --bg-parchment: #FAFCFF;
    --surface-paper: #FFFFFF;
    --surface-lab: #EDF7FF;
    --text-academic: #101820;

    --accent-sage: #00A8C8;
    --accent-cyan: var(--accent-sage);
    --text-sage: #23505F;
    --accent-navy: #0033A0;
    --accent-mustard: #FFD200;
    --accent-red: #E43D30;

    --code-bg: #EEF4FF;
    --border-subtle: #B7C5D6;
    --rule-strong: #101820;

    /* Semantic aliases for hardcoded values */
    --nav-backdrop: rgba(250, 252, 255, 0.86);
    --shadow-subtle: rgba(16, 24, 32, 0.08);
    --shadow-hover: rgba(16, 24, 32, 0.16);
    --shadow-nav: rgba(0, 51, 160, 0.14);
    --shadow-chemdraw: rgba(0, 51, 160, 0.18);
    --focus-ring: var(--accent-mustard);
    --callout-navy-bg: var(--accent-navy);
    --callout-navy-border: color-mix(in srgb, var(--accent-navy) 80%, black 20%);
    --callout-navy-text: #FAFCFF;
    --callout-sage-bg: #007F99;
    --callout-sage-border: color-mix(in srgb, var(--callout-sage-bg) 80%, black 20%);
    --callout-sage-text: #FAFCFF;
    --callout-mustard-text: #101820;
    --callout-mustard-border: #B99A00;
    --callout-shadow: rgba(0, 0, 0, 0.08);
    --hero-gradient: rgba(0, 168, 200, 0.10);
    --tag-mustard-text: #735F00;
    --footer-bg: color-mix(in srgb, var(--bg-parchment) 95%, var(--accent-navy) 5%);
    --bg-rule-color: color-mix(in srgb, var(--accent-navy) 6%, transparent);
    --bg-rule-strong: color-mix(in srgb, var(--accent-cyan) 10%, transparent);
    --bg-texture:
        linear-gradient(var(--bg-rule-strong) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-rule-strong) 1px, transparent 1px),
        linear-gradient(var(--bg-rule-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-rule-color) 1px, transparent 1px);

    /* Typography */
    --font-prose: 'Archivo', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-transit: 'Archivo', 'Inter', 'Helvetica Neue', sans-serif;
    --font-editorial: Georgia, 'Newsreader', 'Crimson Pro', serif;
    --font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;

    /* Type scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
    --text-3xl: clamp(2rem, 1.55rem + 2vw, 3rem);
    --text-4xl: clamp(2.5rem, 1.9rem + 3vw, 4rem);
    --text-5xl: clamp(3rem, 2rem + 5vw, 5.75rem);

    /* Layout */
    --max-width-reading: 920px;
    --max-width-hub: 1200px;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;

    /* Borders */
    --radius-sm: 2px;
    --radius-md: 3px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

[data-theme="dark"] {
    --bg-parchment: #0C1118;
    --surface-paper: #111A26;
    --surface-lab: #122536;
    --text-academic: #F3F7FC;

    --accent-sage: #35D8F2;
    --accent-cyan: var(--accent-sage);
    --text-sage: #A8E8F5;
    --accent-navy: #8CB6FF;
    --accent-mustard: #FFE066;
    --accent-red: #FF756B;

    --code-bg: #182232;
    --border-subtle: #3B5068;
    --rule-strong: #F3F7FC;

    --nav-backdrop: rgba(12, 17, 24, 0.88);
    --shadow-subtle: rgba(0, 0, 0, 0.28);
    --shadow-hover: rgba(0, 0, 0, 0.46);
    --shadow-nav: rgba(0, 0, 0, 0.35);
    --shadow-chemdraw: rgba(53, 216, 242, 0.22);
    --callout-navy-bg: #2A3A52;
    --callout-navy-border: #1B263B;
    --callout-navy-text: #E8E4DC;
    --callout-sage-bg: #4D5D4B;
    --callout-sage-border: #3D4D3B;
    --callout-sage-text: #E8E4DC;
    --callout-mustard-text: #1A1A1E;
    --callout-mustard-border: #C4A84E;
    --callout-shadow: rgba(0, 0, 0, 0.25);
    --hero-gradient: rgba(53, 216, 242, 0.12);
    --tag-mustard-text: #FFE066;
    --footer-bg: color-mix(in srgb, var(--bg-parchment) 95%, var(--accent-navy) 5%);
    --focus-ring: var(--accent-mustard);
    --bg-rule-color: color-mix(in srgb, var(--accent-sage) 8%, transparent);
    --bg-rule-strong: color-mix(in srgb, var(--accent-navy) 12%, transparent);
    --bg-texture:
        linear-gradient(var(--bg-rule-strong) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-rule-strong) 1px, transparent 1px),
        linear-gradient(var(--bg-rule-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-rule-color) 1px, transparent 1px);
}