/* Shared light/dark theme layer. Loaded after each page stylesheet. */

/* Toggle button */
.theme-toggle {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
    border-radius: 50%;
    background: var(--card, var(--surface, rgba(255, 255, 255, 0.06)));
    color: var(--ink, #eef2fa);
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--accent, #2d72cd);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent, #2d72cd);
    outline-offset: 3px;
}

.theme-toggle--bar {
    flex: 0 0 auto;
}

.theme-toggle--float {
    position: fixed;
    z-index: 90;
    right: calc(max(22px, env(safe-area-inset-right)) + 62px);
    bottom: calc(max(22px, env(safe-area-inset-bottom)) + 6px);
    box-shadow: 0 12px 26px -16px rgba(10, 15, 22, 0.55);
}

.theme-ico {
    grid-area: 1 / 1;
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    transition: opacity 0.18s ease, transform 0.22s ease;
}

.theme-ico svg {
    display: block;
    width: 100%;
    height: 100%;
}

.theme-ico-moon {
    opacity: 1;
    transform: none;
}

.theme-ico-sun {
    opacity: 0;
    transform: rotate(-30deg) scale(0.7);
}

html[data-theme="dark"] .theme-ico-moon {
    opacity: 0;
    transform: rotate(30deg) scale(0.7);
}

html[data-theme="dark"] .theme-ico-sun {
    opacity: 1;
    transform: none;
}

/* Shared dark palette for pages that are light by default */
html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-native-theme="light"][data-theme="dark"] {
    --ink: #e7edf7;
    --ink-soft: #b3bfd0;
    --muted: #8b97a9;
    --line: #26313f;
    --page: #0a0f16;
    --card: #111923;
    --paper: #111923;
    --media: #151e2a;
    --accent: #6ea8f0;
    --accent-deep: #8ab8f8;
}

/* Certificates */
html[data-native-theme="light"][data-theme="dark"] .filter-bar {
    background: rgba(10, 15, 22, 0.9);
}

html[data-native-theme="light"][data-theme="dark"] .filter-chip:hover {
    border-color: #3a4657;
}

html[data-native-theme="light"][data-theme="dark"] .filter-chip span {
    color: #7f8c9f;
}

html[data-native-theme="light"][data-theme="dark"] .filter-chip.is-active {
    border-color: #e7edf7;
    background: #e7edf7;
    color: #0a0f16;
}

html[data-native-theme="light"][data-theme="dark"] .filter-chip.is-active span {
    color: rgba(10, 15, 22, 0.58);
}

html[data-native-theme="light"][data-theme="dark"] .cert-card:hover .cert-media {
    border-color: #3a4657;
    box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.85);
}

/* Projects */
html[data-native-theme="light"][data-theme="dark"] .project-card:hover .project-media {
    border-color: #3a4657;
    box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.85);
}

html[data-native-theme="light"][data-theme="dark"] .project-flag {
    color: #7f8c9f;
}

/* CV */
html[data-native-theme="light"][data-theme="dark"] body.has-background {
    background-color: #05090f;
}

html[data-native-theme="light"][data-theme="dark"] .sheet {
    box-shadow: 0 32px 80px -48px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.4);
}

html[data-native-theme="light"][data-theme="dark"] .portrait img {
    background: #1a2431;
}

html[data-native-theme="light"][data-theme="dark"] .entry + .entry,
html[data-native-theme="light"][data-theme="dark"] .simple-list li,
html[data-native-theme="light"][data-theme="dark"] .link-row {
    border-color: #1d2733;
}

html[data-native-theme="light"][data-theme="dark"] .meter {
    background: #22303f;
}

html[data-native-theme="light"][data-theme="dark"] .tag,
html[data-native-theme="light"][data-theme="dark"] .interest-list li {
    background: #17212d;
}

html[data-native-theme="light"][data-theme="dark"] .simple-list .tag {
    background: #1b2634;
}

html[data-native-theme="light"][data-theme="dark"] .eyebrow,
html[data-native-theme="light"][data-theme="dark"] .contact-strip i,
html[data-native-theme="light"][data-theme="dark"] .link-row i,
html[data-native-theme="light"][data-theme="dark"] .interest-list i {
    color: color-mix(in srgb, var(--cv-primary) 62%, #ffffff);
}

html[data-native-theme="light"][data-theme="dark"] .entry:hover .entry-body h3,
html[data-native-theme="light"][data-theme="dark"] .link-row:hover,
html[data-native-theme="light"][data-theme="dark"] .contact-strip a:hover {
    color: color-mix(in srgb, var(--cv-accent) 45%, #ffffff);
}

/* Games */
html[data-native-theme="light"][data-theme="dark"] body.games-body {
    background: linear-gradient(135deg, #0c131c 0%, #0a1017 55%, #080d13 100%);
    color: #e7edf7;
}

html[data-native-theme="light"][data-theme="dark"] body.games-body .eyebrow {
    color: #8b97a9;
}

html[data-native-theme="light"][data-theme="dark"] body.games-body h1 {
    color: #eef2fa;
}

html[data-native-theme="light"][data-theme="dark"] body.games-body .subtitle {
    color: #a9b4c4;
}

html[data-native-theme="light"][data-theme="dark"] body.games-body .back-link {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #e7edf7;
}

html[data-native-theme="light"][data-theme="dark"] body.games-body .back-link:hover {
    background: rgba(255, 255, 255, 0.12);
}

html[data-native-theme="light"][data-theme="dark"] body.games-body .empty {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: #b3bfd0;
}

/* Combination page (inline legacy styles) */
body.combination-page {
    margin: 0;
}

html[data-native-theme="light"][data-theme="dark"] body.combination-page {
    background: #0a0f16;
    color: #e7edf7;
}

html[data-native-theme="light"][data-theme="dark"] body.combination-page table,
html[data-native-theme="light"][data-theme="dark"] body.combination-page th,
html[data-native-theme="light"][data-theme="dark"] body.combination-page td {
    border-color: #26313f;
}

html[data-native-theme="light"][data-theme="dark"] body.combination-page table,
html[data-native-theme="light"][data-theme="dark"] body.combination-page .result-table {
    background: #111923;
}

html[data-native-theme="light"][data-theme="dark"] body.combination-page .result-list {
    border-color: #26313f;
    background: #0d141d;
    color: #e7edf7;
}

html[data-native-theme="light"][data-theme="dark"] body.combination-page .error-box {
    border-color: #5c2733;
    background: #2a1419;
    color: #ffb4c0;
}

html[data-native-theme="light"][data-theme="dark"] body.combination-page .hint {
    color: #8b97a9;
}

html[data-native-theme="light"][data-theme="dark"] body.combination-page input[type="text"],
html[data-native-theme="light"][data-theme="dark"] body.combination-page input[type="number"] {
    padding: 0.45rem 0.65rem;
    border: 1px solid #26313f;
    border-radius: 6px;
    background: #111923;
    color: #e7edf7;
}

html[data-native-theme="light"][data-theme="dark"] body.combination-page input[type="submit"] {
    padding: 0.55rem 1.1rem;
    border: 1px solid #2d3a4a;
    border-radius: 8px;
    background: #1a2431;
    color: #e7edf7;
    cursor: pointer;
}

/* Quick navigation floating menu */
html[data-native-theme="light"][data-theme="dark"] .qn-toggle {
    border-color: #e7edf7;
    background: #e7edf7;
    color: #0a0f16;
}

html[data-native-theme="light"][data-theme="dark"] .qn-toggle:hover {
    background: #ffffff;
}

html[data-native-theme="light"][data-theme="dark"] .qn-item {
    border-color: #26313f;
    background: #111923;
    color: #e7edf7;
    box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.8);
}

html[data-native-theme="light"][data-theme="dark"] .qn-item:hover {
    border-color: #3a4657;
}

html[data-native-theme="light"][data-theme="dark"] .qn-ico {
    background: #1a2431;
    color: #b3bfd0;
}

html[data-native-theme="light"][data-theme="dark"] .qn-item.is-active {
    border-color: rgba(110, 168, 240, 0.45);
    color: #8ab8f8;
}

html[data-native-theme="light"][data-theme="dark"] .qn-item.is-active .qn-ico {
    background: #16263a;
    color: #8ab8f8;
}

/* Light home page */
html[data-native-theme="dark"][data-theme="light"] {
    color-scheme: light;
    --ink: #101828;
    --ink-soft: #475467;
    --ink-faint: #667085;
    --line: rgba(16, 24, 40, 0.14);
    --surface: rgba(255, 255, 255, 0.66);
}

html[data-native-theme="dark"][data-theme="light"] body.home-page {
    background-color: #eef2f7;
}

html[data-native-theme="dark"][data-theme="light"] .backdrop {
    background:
        radial-gradient(70rem 40rem at 82% -12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
        radial-gradient(58rem 38rem at -8% 108%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(244, 247, 251, 0.86), rgba(244, 247, 251, 0.93) 60%, rgba(244, 247, 251, 0.97));
}

html[data-native-theme="dark"][data-theme="light"] body.has-photo .backdrop {
    background:
        radial-gradient(70rem 40rem at 82% -12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(244, 247, 251, 0.9), rgba(244, 247, 251, 0.95) 62%, rgba(244, 247, 251, 0.98));
}

html[data-native-theme="dark"][data-theme="light"] .hero-title em {
    color: color-mix(in srgb, var(--accent) 55%, #101828);
}

html[data-native-theme="dark"][data-theme="light"] .route-card {
    color: #eef2fa;
}

html[data-native-theme="dark"][data-theme="light"] .topbar-link:hover {
    border-color: rgba(16, 24, 40, 0.24);
    background: rgba(255, 255, 255, 0.9);
}

html[data-native-theme="dark"][data-theme="light"] .launcher-toggle:hover,
html[data-native-theme="dark"][data-theme="light"] .app-launcher.is-open .launcher-toggle {
    border-color: rgba(16, 24, 40, 0.24);
    background: rgba(255, 255, 255, 0.95);
}

html[data-native-theme="dark"][data-theme="light"] .launcher-panel {
    border-color: #dbe2ea;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 60px -24px rgba(16, 24, 40, 0.35);
}

html[data-native-theme="dark"][data-theme="light"] .launcher-title {
    color: #667085;
}

html[data-native-theme="dark"][data-theme="light"] .launcher-item:hover,
html[data-native-theme="dark"][data-theme="light"] .launcher-item:focus-visible {
    background: rgba(16, 24, 40, 0.05);
}

html[data-native-theme="dark"][data-theme="light"] .launcher-ico {
    border-color: rgba(16, 24, 40, 0.08);
    background: rgba(16, 24, 40, 0.05);
    color: #101828;
}

html[data-native-theme="dark"][data-theme="light"] .launcher-item:hover .launcher-ico {
    border-color: rgba(16, 24, 40, 0.16);
    background: rgba(16, 24, 40, 0.08);
}

html[data-native-theme="dark"][data-theme="light"] .launcher-label {
    color: #475467;
}

/* Legacy pages without light tokens */
html[data-theme="light"] body.games-body .theme-toggle--float,
html[data-theme="light"] body.combination-page .theme-toggle--float {
    border-color: rgba(16, 24, 40, 0.16);
    background: rgba(255, 255, 255, 0.82);
    color: #101828;
}

html[data-theme="light"] body.games-body .theme-toggle--float:hover,
html[data-theme="light"] body.combination-page .theme-toggle--float:hover {
    border-color: rgba(16, 24, 40, 0.3);
    background: #ffffff;
}

/* Responsive floating control */
@media (max-width: 480px) {
    .theme-toggle--float {
        right: calc(max(16px, env(safe-area-inset-right)) + 58px);
        bottom: calc(max(16px, env(safe-area-inset-bottom)) + 4px);
    }
}

@media print {
    html[data-native-theme="light"][data-theme="dark"] {
        --ink: #0f172a;
        --ink-soft: #475569;
        --muted: #6b7280;
        --line: #e5e9f0;
        --page: #ffffff;
        --card: #ffffff;
        --paper: #ffffff;
        --media: #ffffff;
    }

    .theme-toggle,
    .quick-nav {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-ico {
        transition-duration: 0.01ms !important;
    }
}