/* ============================================================
   RGS  Theme variables + toggle
   Defines both palettes as CSS custom properties.
   Only this file changes when you want to adjust the look.
   ============================================================ */

/* ---------- DARK (default) ---------- */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Base backgrounds */
    --rgs-bg:              #071427;
    --rgs-bg-2:            #0b1d3a;
    --rgs-bg-3:            #0f2650;

    /* Surfaces (cards, headers, etc.) */
    --rgs-surface:         rgba(255, 255, 255, 0.045);
    --rgs-surface-2:       rgba(255, 255, 255, 0.06);
    --rgs-surface-solid:   #0b1d3a;
    --rgs-surface-hi:      rgba(255, 255, 255, 0.08);

    /* Glass */
    --rgs-glass:           rgba(11, 29, 58, 0.62);
    --rgs-glass-2:         rgba(11, 29, 58, 0.75);
    --rgs-glass-3:         rgba(11, 29, 58, 0.90);
    --rgs-glass-border:    rgba(255, 255, 255, 0.14);
    --rgs-glass-border-2:  rgba(255, 255, 255, 0.10);

    /* Text */
    --rgs-text:            #ffffff;
    --rgs-text-2:          rgba(255, 255, 255, 0.85);
    --rgs-text-3:          rgba(255, 255, 255, 0.72);
    --rgs-text-4:          rgba(255, 255, 255, 0.55);
    --rgs-text-5:          rgba(255, 255, 255, 0.35);

    /* Borders & lines */
    --rgs-border:          rgba(255, 255, 255, 0.10);
    --rgs-border-2:        rgba(255, 255, 255, 0.16);

    /* Brand  same in both themes */
    --rgs-navy:            #0b1d3a;
    --rgs-navy-deep:       #071427;
    --rgs-red:             #c8102e;
    --rgs-red-dark:        #a00c24;
    --rgs-white:           #ffffff;

    /* Shadows */
    --rgs-shadow-sm:       0 4px 12px rgba(0,0,0,0.28);
    --rgs-shadow:          0 8px 28px rgba(0,0,0,0.28);
    --rgs-shadow-lg:       0 16px 42px rgba(0,0,0,0.34);
    --rgs-shadow-xl:       0 24px 60px rgba(0,0,0,0.55);

    /* Neumorphic inset */
    --rgs-inset-hi:        rgba(255,255,255,0.10);
    --rgs-inset-lo:        rgba(0,0,0,0.25);

    /* Overlay backdrop */
    --rgs-overlay:         rgba(4, 10, 22, 0.75);

    /* ---------- Toggle-specific ---------- */
    --rgs-toggle-track-light:  linear-gradient(135deg, #fff3d6 0%, #ffe0a3 100%);
    --rgs-toggle-track-dark:   linear-gradient(135deg, #0a1633 0%, #1a2c58 100%);
    --rgs-toggle-knob-light:   #f9c22e;
    --rgs-toggle-knob-dark:    #cbd5e1;
    --rgs-toggle-sun:          #b96000;
    --rgs-toggle-moon:         #a6b4c9;
    --rgs-toggle-star:         #ffffff;
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
    color-scheme: light;

    --rgs-bg:              #f4f6fb;
    --rgs-bg-2:            #eef1f8;
    --rgs-bg-3:            #e6eaf4;

    --rgs-surface:         #ffffff;
    --rgs-surface-2:       #f8fafd;
    --rgs-surface-solid:   #ffffff;
    --rgs-surface-hi:      rgba(11, 29, 58, 0.04);

    --rgs-glass:           rgba(255, 255, 255, 0.72);
    --rgs-glass-2:         rgba(255, 255, 255, 0.82);
    --rgs-glass-3:         rgba(255, 255, 255, 0.94);
    --rgs-glass-border:    rgba(11, 29, 58, 0.10);
    --rgs-glass-border-2:  rgba(11, 29, 58, 0.08);

    --rgs-text:            #0b1d3a;
    --rgs-text-2:          rgba(11, 29, 58, 0.90);
    --rgs-text-3:          rgba(11, 29, 58, 0.72);
    --rgs-text-4:          rgba(11, 29, 58, 0.55);
    --rgs-text-5:          rgba(11, 29, 58, 0.38);

    --rgs-border:          rgba(11, 29, 58, 0.10);
    --rgs-border-2:        rgba(11, 29, 58, 0.18);

    --rgs-shadow-sm:       0 4px 12px rgba(11, 29, 58, 0.08);
    --rgs-shadow:          0 8px 28px rgba(11, 29, 58, 0.10);
    --rgs-shadow-lg:       0 16px 42px rgba(11, 29, 58, 0.14);
    --rgs-shadow-xl:       0 24px 60px rgba(11, 29, 58, 0.18);

    --rgs-inset-hi:        rgba(255,255,255,0.95);
    --rgs-inset-lo:        rgba(11,29,58,0.08);

    --rgs-overlay:         rgba(11, 29, 58, 0.35);

    --rgs-toggle-knob-light: #f9c22e;
    --rgs-toggle-knob-dark:  #1f3466;
    --rgs-toggle-sun:        #b96000;
    --rgs-toggle-moon:       #e2e8f0;
    --rgs-toggle-star:       #ffffff;
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.rgs-theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    /* Neumorphic track */
    background: var(--rgs-toggle-track-dark);
    border: 1px solid var(--rgs-border-2);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.35),
        inset 0 -1px 0 rgba(255,255,255,0.06),
        0 4px 12px rgba(0,0,0,0.28);
    transition: background 320ms cubic-bezier(.4,0,.2,1),
                border-color 320ms,
                box-shadow 320ms;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

:root[data-theme="light"] .rgs-theme-toggle {
    background: var(--rgs-toggle-track-light);
    box-shadow:
        inset 0 2px 6px rgba(180,140,60,0.28),
        inset 0 -1px 0 rgba(255,255,255,0.9),
        0 4px 12px rgba(11,29,58,0.10);
}

.rgs-theme-toggle:focus-visible {
    outline: 2px solid var(--rgs-red);
    outline-offset: 3px;
}

/* Inner sky  stars appear when dark */
.rgs-theme-toggle__sky {
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity 320ms cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
:root[data-theme="light"] .rgs-theme-toggle__sky {
    opacity: 0;
}

.rgs-theme-toggle__star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--rgs-toggle-star);
    box-shadow: 0 0 4px rgba(255,255,255,0.85);
    opacity: 0.85;
    animation: rgs-star-twinkle 3s ease-in-out infinite;
}
.rgs-theme-toggle__star:nth-child(1) { top: 22%; left: 52%; animation-delay: 0s; }
.rgs-theme-toggle__star:nth-child(2) { top: 55%; left: 62%; animation-delay: 0.9s; }
.rgs-theme-toggle__star:nth-child(3) { top: 36%; left: 76%; animation-delay: 1.7s; }

@keyframes rgs-star-twinkle {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}

/* The knob  sun / moon live inside it */
.rgs-theme-toggle__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rgs-toggle-knob-dark);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -2px 0 rgba(0,0,0,0.15);
    transition: left 320ms cubic-bezier(.4,0,.2,1),
                background 320ms,
                box-shadow 320ms;
    z-index: 2;
}

:root[data-theme="light"] .rgs-theme-toggle__knob {
    left: calc(100% - 33px);
    background: var(--rgs-toggle-knob-light);
    box-shadow:
        0 2px 6px rgba(180,120,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -2px 0 rgba(0,0,0,0.12);
}

/* Sun icon  visible only in light mode */
.rgs-theme-toggle__sun,
.rgs-theme-toggle__moon {
    grid-area: 1 / 1;
    transition: opacity 260ms, transform 320ms cubic-bezier(.4,0,.2,1);
}

.rgs-theme-toggle__sun {
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
    color: var(--rgs-toggle-sun);
}
.rgs-theme-toggle__sun svg { display: block; }
.rgs-theme-toggle__sun svg .rgs-sun-rays {
    transform-origin: 12px 12px;
    animation: rgs-sun-rotate 24s linear infinite;
}

:root[data-theme="light"] .rgs-theme-toggle__sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Moon icon  visible only in dark mode */
.rgs-theme-toggle__moon {
    opacity: 1;
    transform: scale(1) rotate(0);
    color: var(--rgs-toggle-moon);
}
.rgs-theme-toggle__moon svg { display: block; }

:root[data-theme="light"] .rgs-theme-toggle__moon {
    opacity: 0;
    transform: scale(0.4) rotate(90deg);
}

@keyframes rgs-sun-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Hover lift */
.rgs-theme-toggle:hover {
    border-color: rgba(200,16,46,0.5);
}
.rgs-theme-toggle:hover .rgs-theme-toggle__knob {
    box-shadow:
        0 4px 12px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}

/* Active press */
.rgs-theme-toggle:active .rgs-theme-toggle__knob {
    box-shadow:
        0 1px 3px rgba(0,0,0,0.4),
        inset 0 2px 4px rgba(0,0,0,0.30),
        inset 0 -1px 0 rgba(255,255,255,0.20);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rgs-theme-toggle,
    .rgs-theme-toggle__knob,
    .rgs-theme-toggle__sky,
    .rgs-theme-toggle__sun,
    .rgs-theme-toggle__moon {
        transition: none !important;
        animation: none !important;
    }
    .rgs-theme-toggle__sun svg .rgs-sun-rays {
        animation: none !important;
    }
    .rgs-theme-toggle__star {
        animation: none !important;
    }
}