/* Theme tokens — light (default) */
:root,
html[data-theme="light"] {
    color-scheme: light;

    --color-bg: #eef1f4;
    --color-bg-gradient-top: #f7f7f5;
    --color-bg-gradient-mid: #eef1f4;
    --color-bg-gradient-bottom: #e2e6ea;
    --color-surface: #ffffff;
    --color-surface-muted: #f4f5f6;
    --color-text: #2f3339;
    --color-text-muted: #666666;
    --color-text-subtle: #888888;
    --color-border: #d8dce0;
    --color-border-strong: #cccccc;
    --color-accent: #191f1f;
    --color-accent-hover: #333333;
    --color-on-accent: #ffffff;
    --color-link: #0000ee;
    --color-header-muted: #777777;
    --color-footer: #a49d95;
    --color-icon: #333333;
    --color-dropdown-hover: #f1f3f5;
    --color-archive-bg: #191f1f;
    --color-archive-text: #9aa0a6;
    --color-archive-surface: #2a3036;
    --shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.12);
    --font-sans: Arial, Helvetica, sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #080808;
    --color-bg-gradient-top: #0a0a0a;
    --color-bg-gradient-mid: #080808;
    --color-bg-gradient-bottom: #050505;
    --color-surface: #111111;
    /* Match archive-bg so panels (public-panel, lander-details, films-page) don't band against the page */
    --color-surface-muted: #000000;
    --color-text: #e8eaed;
    --color-text-muted: #b0b5bb;
    --color-text-subtle: #8b9199;
    --color-border: #222222;
    --color-border-strong: #333333;
    --color-accent: #e8eaed;
    --color-accent-hover: #ffffff;
    --color-on-accent: #080808;
    --color-link: #7baaf7;
    --color-header-muted: #9aa0a6;
    --color-footer: #8b9199;
    --color-icon: #e8eaed;
    --color-dropdown-hover: #1a1a1a;
    --color-archive-bg: #000000;
    --color-archive-text: #9aa0a6;
    --color-archive-surface: #141414;
    --shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.65);
    --font-sans: Arial, Helvetica, sans-serif;
}

.theme-toggle {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.theme-toggle-cycle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    vertical-align: middle;
}

.theme-toggle-cycle i {
    font-size: 16px;
    line-height: 1;
}

.theme-toggle-cycle:hover {
    background: var(--color-dropdown-hover);
}

.theme-toggle-feedback {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.theme-toggle-feedback.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Drawer theme toggle label positioning */
.lander-drawer-footer .theme-toggle-feedback {
    left: auto;
    right: calc(100% + 10px);
}

.top-navigation-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}