:root {
    /* ============================================================
       SITE BASE COLOR (Blue Theme System)
       ============================================================ */
    --site-base-color: #336699;
    --base-color: #336699;
    --base-r: 51;
    --base-g: 102;
    --base-b: 153;
    --base-rgb: 51, 102, 153;
    --base-deep-rgb: 9, 18, 28;
    --base-surface-rgb: 18, 36, 54;
    --base-glow: rgba(51, 102, 153, 0.35);
    --base-border: rgba(51, 102, 153, 0.25);
    --base-bg-subtle: rgba(51, 102, 153, 0.12);

    --base-h: 210;
    --base-s: 50%;
    --base-l: 40%;
    --base: var(--base-h) var(--base-s) var(--base-l);

    /* ============================================================
       SITE SECONDARY COLOR (Yellow / Accent System)
       ============================================================ */
    --site-secondary-color: #f59e0b;
    --secondary-color: #f59e0b;
    --secondary-r: 245;
    --secondary-g: 158;
    --secondary-b: 11;
    --secondary-rgb: 245, 158, 11;
    --secondary-light: #ffca21;
    --secondary-dark: #d08609;
    --secondary-gradient: linear-gradient(135deg, #ffca21 0%, #f59e0b 60%, #d08609 100%);
    --secondary-gradient-hover: linear-gradient(135deg, #f59e0b 0%, #d08609 100%);
    --secondary-glow: rgba(245, 158, 11, 0.35);
    --secondary-glow-hover: rgba(245, 158, 11, 0.5);
    --secondary-border: rgba(245, 158, 11, 0.35);
    --secondary-bg-subtle: rgba(245, 158, 11, 0.12);
    --secondary-text: #080c18;

    --base-two-h: 38;
    --base-two-s: 92%;
    --base-two-l: 50%;
    --base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l);
}