:root {
    /* Base Theme Colors */
    --color-bg-primary: #fcfc69; /* Primary Yellow Background */

    /* Robust Theme Variables - Saturated & Complementary */
    --color-primary: #3b82f6; /* Saturated Blue */
    --color-primary-hover: #2563eb;
    --color-primary-muted: rgba(59, 130, 246, 0.6);
    --color-primary-light: rgba(59, 130, 246, 0.15);

    /* UI Element Colors */
    --color-btn-bg: rgba(59, 130, 246, 0.12); /* Ever so slight blue tint */
    --color-btn-hover: rgba(59, 130, 246, 0.5);
    --color-icon: #1e3a8a; /* Deep blue for better contrast against yellow */
    --color-dot: rgba(59, 130, 246, 0.4);
    --color-dot-active: var(--color-primary);
    --color-error: #ef4444;
    --color-nav-bg: rgba(255, 255, 255, 0.4);

    /* Modals & Surfaces */
    --color-modal-bg: rgba(252, 252, 105, 0.85); /* Transparent pastel yellow */

    /* Layout Variables */
    --loader-bar-width: 300px; /* Matched from previous override */

    /* Shadows & Effects */
    --shadow-base:
        0 4px 6px -1px rgba(30, 58, 138, 0.15),
        0 2px 4px -1px rgba(30, 58, 138, 0.1);
    --shadow-large: 0 25px 50px -12px rgba(30, 58, 138, 0.25);

    /* Timings */
    --transition-speed: 0.3s;
}

body,
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--color-bg-primary);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}