:root {
    --body-background: #f8fafc;
    --gradient-dark-blue: #1e4b9c;
    --gradient-mid-blue: #2c85ab;
    --gradient-mint-green: #37b594;
    --text-turquoise: #0a7572;
    --nav-link-color: rgba(30, 75, 156, 0.8);
    --sphere-glow-outer: rgba(44, 133, 171, 0.15);
    --sphere-glow-dark: rgba(226, 232, 240, 0.5);
    --sphere-glow-inner: rgba(55, 181, 148, 0.1);
    --subtitle-glow: rgba(10, 117, 114, 0.3);
    --nav-hover-glow: rgba(55, 181, 148, 0.4);
    --logo-shadow: rgba(30, 120, 140, 0.4);
    --sphere-bg-core: rgba(173, 216, 230, 0.4);
    --sphere-bg-middle: rgba(135, 206, 235, 0.3);
    --sphere-bg-edge: rgba(176, 224, 230, 0.15);
    --sphere-border: rgba(40, 140, 160, 0.2);
    --button-shadow-soft: rgba(10, 117, 114, 0.3);
    --button-shadow-spread: rgba(10, 117, 114, 0.1);
    --button-hover-shadow-soft: rgba(55, 181, 148, 0.5);
    --button-hover-shadow-spread: rgba(55, 181, 148, 0.2);
    --button-hover-shadow-inner: rgba(55, 181, 148, 0.1);
    --grid-line-color: rgba(40, 140, 160, 0.1);
    --header-bg: #d0e4f2;
    --footer-bg: rgba(200, 220, 230, 0.95);
    --button-text: #ffffff;
    --article-bg-odd: rgba(200, 220, 230, 0.4);
    --article-bg-even: rgba(180, 210, 220, 0.4);
    --article-text: #334155;
    --example-block-bg: rgba(255, 255, 255, 0.7);
    --example-bg: rgba(230, 240, 245, 0.8);
    --logo-gradient: linear-gradient(135deg, var(--gradient-dark-blue) 0%, var(--gradient-mid-blue) 40%, var(--gradient-mint-green) 100%);
    --header-brand-gradient: linear-gradient(135deg, var(--gradient-mid-blue) 0%, var(--gradient-mint-green) 100%);
    --nav-underline-gradient: linear-gradient(90deg, var(--gradient-dark-blue), var(--gradient-mint-green));
    --grid-size: 50px;
    --grid-size-large: 100px;
}