/* SYLTECH GLOBAL: shared light/dark theme variables.
   Dark is the default (matches the original design); [data-theme="light"] overrides
   only the tokens that actually need to flip for a readable light surface. Brand/accent
   tokens (gold primary-container, on-primary, secondary/tertiary/error families) are
   intentionally left constant across both themes. */

:root {
    --color-secondary-container: #384968;
    --color-outline: #9d8f79;
    --color-surface-container-low: #111c2d;
    --color-surface-variant: #2b3548;
    --color-secondary-fixed-dim: #b5c7eb;
    --color-inverse-surface: #d9e3fb;
    --color-on-primary: #412d00;
    --color-primary: #ffdb9f;
    --color-on-tertiary: #0c2e65;
    --color-surface: #091324;
    --color-surface-dim: #091324;
    --color-tertiary: #d5e0ff;
    --color-tertiary-fixed-dim: #afc6ff;
    --color-on-error-container: #ffdad6;
    --color-background-elite: #051221;
    --color-on-surface: #d9e3fb;
    --color-background-light: #F8FAFC;
    --color-on-secondary-container: #a7b9dd;
    --color-surface-tint: #ffbb1e;
    --color-error: #ffb4ab;
    --color-background: #091324;
    --color-on-primary-fixed-variant: #5e4200;
    --color-on-tertiary-fixed-variant: #29457d;
    --color-text-on-dark: #F8FAFC;
    --color-secondary: #b5c7eb;
    --color-on-tertiary-container: #345088;
    --color-on-error: #690005;
    --color-on-secondary-fixed-variant: #354765;
    --color-tertiary-container: #abc4ff;
    --color-text-primary: #101828;
    --color-surface-container-high: #202a3c;
    --color-border-glass: rgba(255, 255, 255, 0.1);
    --color-surface-container-highest: #2b3548;
    --color-tertiary-fixed: #d9e2ff;
    --color-on-primary-fixed: #271900;
    --color-surface-container-lowest: #040e1f;
    --color-secondary-fixed: #d6e3ff;
    --color-on-background: #d9e3fb;
    --color-error-container: #93000a;
    --color-primary-container: #fdb813;
    --color-on-surface-variant: #d5c4ac;
    --color-surface-bright: #2f394c;
    --color-primary-fixed-dim: #ffbb1e;
    --color-inverse-on-surface: #273143;
    --color-primary-fixed: #ffdea7;
    --color-surface-container: #162031;
    --color-on-secondary: #1e314e;
    --color-on-primary-container: #6b4b00;
    --color-outline-variant: #504533;
    --color-inverse-primary: #7c5800;
    --color-on-secondary-fixed: #061b37;
    --color-on-tertiary-fixed: #001a43;

    /* Glassmorphism panels */
    --glass-panel-bg: rgba(255, 255, 255, 0.03);
    --glass-panel-border: rgba(255, 255, 255, 0.1);
    --glass-card-bg: rgba(17, 28, 45, 0.45);
    --glass-card-border: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] {
    /* Sovereign Tech Light */
    --color-background: #fff8f3;
    --color-background-elite: #e5d8c8;
    --color-surface: #fff8f3;
    --color-surface-dim: #e5d8c8;
    --color-surface-bright: #fff8f3;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #fff2e1;
    --color-surface-container: #f9ecdc;
    --color-surface-container-high: #f3e6d6;
    --color-surface-container-highest: #ede1d1;
    --color-surface-variant: #ede1d1;
    --color-on-background: #211b11;
    --color-on-surface: #211b11;
    --color-on-surface-variant: #504533;
    --color-inverse-surface: #362f25;
    --color-inverse-on-surface: #fcefdf;
    --color-outline: #837560;
    --color-outline-variant: #d5c4ac;
    --color-surface-tint: #7c5800;
    --color-primary: #7c5800;
    --color-on-primary: #ffffff;
    --color-primary-container: #fdb813;
    --color-on-primary-container: #6b4b00;
    --color-inverse-primary: #ffbb1e;
    --color-secondary: #4d5f7e;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #c8dbff;
    --color-on-secondary-container: #4e607f;
    --color-tertiary: #00677d;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #1fd5ff;
    --color-on-tertiary-container: #00596c;
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-primary-fixed: #ffdea7;
    --color-primary-fixed-dim: #ffbb1e;
    --color-on-primary-fixed: #271900;
    --color-on-primary-fixed-variant: #5e4200;
    --color-secondary-fixed: #d6e3ff;
    --color-secondary-fixed-dim: #b5c7eb;
    --color-on-secondary-fixed: #061b37;
    --color-on-secondary-fixed-variant: #354765;
    --color-tertiary-fixed: #b3ebff;
    --color-tertiary-fixed-dim: #3bd7ff;
    --color-on-tertiary-fixed: #001f27;
    --color-on-tertiary-fixed-variant: #004e5f;
    --color-border-glass: rgba(33, 27, 17, 0.08);

    --glass-panel-bg: rgba(33, 27, 17, 0.035);
    --glass-panel-border: rgba(33, 27, 17, 0.08);
    --glass-card-bg: rgba(255, 255, 255, 0.6);
    --glass-card-border: rgba(33, 27, 17, 0.08);
}

/* Dark scrims placed over photos so overlaid text/icons stay legible.
   These are intentionally NOT theme-reactive; their only job is darkening
   a photo for light text on top, in both light and dark site themes. */
.photo-scrim {
    background: linear-gradient(to top, #051221 0%, transparent 100%);
}
.photo-scrim-strong {
    background: linear-gradient(to top, rgba(5, 18, 33, 0.92) 0%, rgba(5, 18, 33, 0.35) 55%, transparent 100%);
}
/* Text/icon colors for content sitting on top of a photo-scrim: always light,
   regardless of site theme, since the scrim above is always dark. */
.on-scrim-primary {
    color: #ffdb9f;
}
.on-scrim-text {
    color: #F8FAFC;
}

/* Theme toggle button, shared across all pages */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 1px solid var(--color-border-glass);
    background: var(--glass-panel-bg);
    color: var(--color-primary-fixed-dim, #ffbb1e);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
    border-color: #fdb813;
    transform: scale(1.05);
}

:root[data-theme="light"] .theme-toggle {
    color: var(--color-primary);
}

.theme-toggle .material-symbols-outlined {
    font-size: 20px;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    display: none;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
    display: inline-flex;
}

:root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: inline-flex;
}

/* Legal document modal (Terms of Service, etc.), shared across all pages */
.legal-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(5, 18, 33, 0.7);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.legal-modal-backdrop.is-open {
    display: flex;
}

.legal-modal-panel {
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-border-glass);
    border-radius: 1rem;
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.legal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border-glass);
    flex-shrink: 0;
}

.legal-modal-body {
    padding: 24px;
    overflow-y: auto;
    color: var(--color-on-surface-variant);
}

.legal-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--color-border-glass);
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.legal-modal-close:hover {
    border-color: #fdb813;
    color: var(--color-primary);
}

/* Gallery video modal reuses the legal-modal backdrop/close mechanics above,
   but needs a wider panel and a 16:9 video frame instead of scrolling text. */
.video-modal-panel {
    max-width: 900px;
}

.video-modal-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-modal-frame video {
    width: 100%;
    height: 100%;
    display: block;
}