:root {
    --color-primary: #1C4569;
    --color-primary-dark: #0E2041;
    --color-secondary: #E9A824;
    --color-sky: #3BA5E0;
    --color-paper: #F1F6FA;
    --color-cloud: #FFFFFF;
    --color-card-bg: #E4E9EE;
    --color-bg-page: #F1F6FA;
    --color-bg-tint: #FFFFFF;
    --color-heading-text: #0E2041;
    --color-body-text: #101822;
    --color-link-text: #3BA5E0;
    /* Text sitting directly on the shared dark atmosphere canvas (section
       headings, article body, etc.) — separate from --color-heading-text/
       --color-body-text above, which govern text inside light cards and
       must stay dark regardless of how the canvas text is set. */
    --color-heading-on-canvas: #FFFFFF;
    --color-body-on-canvas: #E7EEF6;
    --font-display: 'Lora', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-eyebrow: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --color-eyebrow: #AF1E2D;
    --size-eyebrow: 13px;
    --gradient-ocean: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-sky) 130%);
    --gradient-ocean-deep: linear-gradient(100deg, #030d18 0%, var(--color-primary-dark) 45%, #0a4d80 100%);
    --gradient-sky: linear-gradient(135deg, var(--color-primary) 0%, var(--color-sky) 100%);
    --gradient-gold: linear-gradient(135deg, var(--color-secondary) 0%, #f5c454 100%);
    /* Single, sitewide "atmosphere" canvas: a soft radial glow (mixed
       toward the sky accent) anchored top-center, settling into the flat
       primary-dark base by ~45% of viewport height — the same structure
       on every page and admin screen, driven by the same three color
       pickers so it can be recolored to any hue, not just blue. */
    --bg-atmosphere:
        radial-gradient(120% 60% at 52% 0%,
            color-mix(in srgb, var(--color-sky) 38%, var(--color-primary-dark)) 0%,
            color-mix(in srgb, var(--color-primary) 30%, var(--color-primary-dark)) 22%,
            var(--color-primary-dark) 48%,
            color-mix(in srgb, black 24%, var(--color-primary-dark)) 100%);
    --admin-color-dark: #0E2041;
    --admin-color-primary: #1C4569;
    --admin-color-accent: #E9A824;
}
html { font-size: 16px; }
body.admin-body .admin-sidebar { background: linear-gradient(160deg, #0E2041 0%, #1C4569 100%); }
body.admin-body .admin-profile__avatar-fallback,
body.admin-body .a-btn-primary,
body.admin-body .msg-bubble.mine { background: linear-gradient(135deg, #1C4569, #E9A824); }
body.admin-body .admin-profile__avatar, body.admin-body .admin-profile__avatar-fallback { border-color: #E9A824; }
body.admin-body .a-stat__num, body.admin-body h1, body.admin-body h2, body.admin-body h3, body.admin-body h4 { color: #0E2041; }
body.admin-body .admin-profile__role { color: #1C4569; background: color-mix(in srgb, #1C4569 12%, transparent); }