/*
 * Takin UI Foundation V1.1
 * Stable public design tokens, neutral light mode, calmer motion, and final mobile navigation polish.
 * This file is intentionally loaded last so it can normalize older visual generations without changing routes or business logic.
 */
:root {
    --tui-bg: #070b12;
    --tui-bg-soft: #0b111c;
    --tui-surface: #101824;
    --tui-surface-raised: #141f2e;
    --tui-surface-soft: rgba(255,255,255,.045);
    --tui-border: rgba(197, 215, 232, .14);
    --tui-border-strong: rgba(197, 215, 232, .24);
    --tui-text: #f4f7fb;
    --tui-muted: #aab6c5;
    --tui-subtle: #77879a;
    --tui-accent: #d9ad52;
    --tui-link: #75cce8;
    --tui-success: #52c88b;
    --tui-danger: #ef7380;
    --tui-warning: #e8b950;
    --tui-radius-sm: 12px;
    --tui-radius-md: 18px;
    --tui-radius-lg: 26px;
    --tui-shadow-sm: 0 10px 28px rgba(0,0,0,.18);
    --tui-shadow-md: 0 22px 60px rgba(0,0,0,.24);
    --tui-motion-fast: 140ms;
    --tui-motion: 220ms;
    --tui-ease: cubic-bezier(.2,.75,.25,1);
}

html[data-tna-theme="light"] {
    color-scheme: light;
    --tui-bg: #f4f6f8;
    --tui-bg-soft: #eef1f4;
    --tui-surface: #ffffff;
    --tui-surface-raised: #ffffff;
    --tui-surface-soft: #f6f8fa;
    --tui-border: #dce2e8;
    --tui-border-strong: #cbd3dc;
    --tui-text: #1b2632;
    --tui-muted: #647180;
    --tui-subtle: #7f8b98;
    --tui-accent: #8b6819;
    --tui-link: #126b7f;
    --tui-success: #1d7650;
    --tui-danger: #b93e4f;
    --tui-warning: #8b6614;
    --tui-shadow-sm: 0 8px 24px rgba(29, 45, 61, .07);
    --tui-shadow-md: 0 18px 48px rgba(29, 45, 61, .10);

    /* Normalize all older token generations into one daylight palette. */
    --tna-bg: var(--tui-bg);
    --tna-bg-2: var(--tui-bg-soft);
    --tna-surface: #ffffff;
    --tna-surface-2: #ffffff;
    --tna-card: #ffffff;
    --tna-card-2: #f8fafb;
    --tna-border: var(--tui-border);
    --tna-border-2: #c8d1db;
    --tna-text: var(--tui-text);
    --tna-muted: var(--tui-muted);
    --tna-dim: var(--tui-subtle);
    --tna-gold: #8b6819;
    --tna-cyan: #126b7f;
    --tna-blue: #285fa7;
    --tna-violet: #67539a;
    --tna-surface-strong: #ffffff;
    --tna-surface-glass: rgba(255,255,255,.96);

    --tnx-bg: var(--tui-bg);
    --tnx-surface: #ffffff;
    --tnx-surface-strong: #ffffff;
    --tnx-card: #ffffff;
    --tnx-card-hover: #f8fafb;
    --tnx-line: var(--tui-border);
    --tnx-line-strong: var(--tui-border-strong);
    --tnx-text: var(--tui-text);
    --tnx-muted: var(--tui-muted);
    --tnx-accent: #8b6819;
    --tnx-secondary: #126b7f;

    --tna-v22-bg: var(--tui-bg);
    --tna-v22-bg-soft: var(--tui-bg-soft);
    --tna-v22-surface: #ffffff;
    --tna-v22-surface-solid: #ffffff;
    --tna-v22-text: var(--tui-text);
    --tna-v22-muted: var(--tui-muted);
    --tna-v22-line: var(--tui-border);
    --tna-v22-line-strong: var(--tui-border-strong);
    --tna-v22-cyan: #126b7f;
    --tna-v22-blue: #285fa7;
    --tna-v22-gold: #8b6819;

    --tna-v27-panel: #ffffff;
    --tna-v27-panel-solid: #ffffff;
    --tna-v27-line: var(--tui-border);
    --tna-v27-shadow: var(--tui-shadow-md);
}

html, body { background: var(--tui-bg); }
body.tna-galaxy {
    color: var(--tui-text);
    background:
        radial-gradient(circle at 8% 0%, rgba(73, 151, 184, .08), transparent 28rem),
        radial-gradient(circle at 92% 5%, rgba(217, 173, 82, .065), transparent 25rem),
        linear-gradient(180deg, var(--tui-bg) 0%, var(--tui-bg-soft) 52%, var(--tui-bg) 100%) !important;
}
html[data-tna-theme="light"] body.tna-galaxy {
    color: var(--tui-text) !important;
    background: linear-gradient(180deg, #f7f8fa 0%, #f1f3f5 52%, #f6f7f9 100%) !important;
    background-attachment: scroll !important;
}

/* Day mode is intentionally clean: no galaxy/noise layers competing with content. */
html[data-tna-theme="light"] .tna-space,
html[data-tna-theme="light"] .tna-network-canvas,
html[data-tna-theme="light"] .tna-cursor-glow { display: none !important; }

/* Calm the legacy cinematic layer. Motion should explain state, not continuously compete for attention. */
.tna-space { opacity: .22 !important; }
.tna-space__stars,
.tna-space__grid,
.tna-space__scan,
.tna-space__dust,
.tna-space__circuit,
.tna-space__constellation,
.tna-space__orb,
.tna-space__nebula { animation: none !important; }
.tna-space__scan,
.tna-space__circuit { display: none !important; }
.tna-network-canvas { opacity: .18 !important; }

/* Global surfaces */
.tna-site-nav,
.tna-site-drawer,
.tna-site-ecosystem__panel,
.tna-site-user__panel,
.tna-card,
.tna-page-card,
.tna-feed-card,
.tna-profile-panel,
.tna-stat-card,
.tna-filter-panel,
.tna-sidebar,
.tna-mini-user-card,
.tna-auth-card,
.tna-auth-art,
.tna-account-home__card,
.tna-dashboard-panel,
.tna-profile-editor__panel,
.tna-admin-page__panel,
.tna-course-card,
.tna-finance-panel {
    border-color: var(--tui-border) !important;
    color: var(--tui-text);
}

.tna-card,
.tna-page-card,
.tna-feed-card,
.tna-profile-panel,
.tna-stat-card,
.tna-filter-panel,
.tna-sidebar,
.tna-mini-user-card,
.tna-auth-card,
.tna-account-home__card,
.tna-dashboard-panel,
.tna-profile-editor__panel,
.tna-course-card,
.tna-finance-panel {
    background: color-mix(in srgb, var(--tui-surface) 96%, transparent) !important;
    box-shadow: var(--tui-shadow-sm) !important;
}

html[data-tna-theme="light"] :is(
    .tna-card,
    .tna-page-card,
    .tna-feed-card,
    .tna-profile-panel,
    .tna-stat-card,
    .tna-filter-panel,
    .tna-sidebar,
    .tna-mini-user-card,
    .tna-auth-card,
    .tna-auth-art,
    .tna-account-home__card,
    .tna-dashboard-panel,
    .tna-profile-editor__panel,
    .tna-course-card,
    .tna-finance-panel,
    .tna-site-footer__callout
) {
    color: var(--tui-text) !important;
    background: #ffffff !important;
    border-color: var(--tui-border) !important;
    box-shadow: var(--tui-shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-tna-theme="light"] :is(.tna-muted, .tna-site-brand__copy small, .tna-site-drawer__head small, .tna-site-drawer__ecosystem small) {
    color: var(--tui-muted) !important;
}

/* Inputs, tables and secondary controls. */
body.tna-galaxy :is(input, textarea, select) {
    color: var(--tui-text);
    border-color: var(--tui-border-strong);
    background-color: var(--tui-surface);
}
body.tna-galaxy :is(input, textarea)::placeholder { color: var(--tui-subtle); opacity: 1; }
body.tna-galaxy :is(input, textarea, select):focus {
    border-color: color-mix(in srgb, var(--tui-link) 58%, var(--tui-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tui-link) 14%, transparent);
    outline: none;
}
html[data-tna-theme="light"] :is(table, th, td) { border-color: var(--tui-border) !important; }
html[data-tna-theme="light"] :is(th, td) { color: var(--tui-text); }
html[data-tna-theme="light"] :is(.tna-btn, button, summary) { text-shadow: none !important; }
html[data-tna-theme="light"] .tna-btn:not(.tna-btn-primary):not(.tna-btn-danger) {
    color: var(--tui-text) !important;
    background: #ffffff !important;
    border-color: var(--tui-border-strong) !important;
    box-shadow: none !important;
}
html[data-tna-theme="light"] .tna-btn-primary {
    color: #ffffff !important;
    background: #126b7f !important;
    border-color: #126b7f !important;
    box-shadow: none !important;
}
html[data-tna-theme="light"] a:not(.tna-btn):not(.tna-site-brand):not(.tna-site-primary-action) { text-decoration-color: color-mix(in srgb, var(--tui-link) 28%, transparent); }

/* Header: quiet and consistent in both themes. */
.tna-site-header::before { opacity: .72; }
.tna-site-nav {
    background: color-mix(in srgb, var(--tui-surface-raised) 96%, transparent) !important;
    box-shadow: var(--tui-shadow-sm) !important;
    backdrop-filter: blur(14px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(110%) !important;
}
html[data-tna-theme="light"] .tna-site-header::before {
    background: linear-gradient(180deg, rgba(244,246,248,.98), rgba(244,246,248,0)) !important;
}
html[data-tna-theme="light"] .tna-site-nav,
html[data-tna-theme="light"] .tna-site-ecosystem__panel,
html[data-tna-theme="light"] .tna-site-user__panel {
    color: var(--tui-text) !important;
    background: #ffffff !important;
    border-color: var(--tui-border) !important;
    box-shadow: var(--tui-shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Footer should remain readable and visually quiet in day mode. */
html[data-tna-theme="light"] :is(.tna-site-footer, .tna-lux-footer) {
    color: var(--tui-text) !important;
    background: #eef1f4 !important;
    border-color: var(--tui-border) !important;
}
html[data-tna-theme="light"] :is(.tna-site-footer a, .tna-lux-footer a) { color: var(--tui-text); }

/* Final mobile navigation contract: right in Persian, left in English. */
@media (max-width: 1199px) {
    .tna-site-header { background: var(--tui-bg) !important; }
    .tna-site-nav {
        display: flex !important;
        align-items: center !important;
        min-height: 68px !important;
        background: var(--tui-surface) !important;
        border-radius: 0 0 18px 18px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .tna-site-menu-button {
        order: -1 !important;
        margin-inline: 0 !important;
        color: var(--tui-text) !important;
        background: var(--tui-surface-soft) !important;
        border-color: var(--tui-border-strong) !important;
    }
    .tna-site-brand { flex: 1 1 auto !important; }
    .tna-site-drawer {
        color: var(--tui-text) !important;
        background: var(--tui-surface) !important;
        border-color: var(--tui-border) !important;
        box-shadow: var(--tui-shadow-md) !important;
    }
    .tna-site-drawer :is(a, button) {
        color: var(--tui-text) !important;
        background: var(--tui-surface-soft) !important;
        border-color: var(--tui-border) !important;
    }
    .tna-menu-backdrop {
        background: rgba(5, 10, 17, .58) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    html[data-tna-theme="light"] .tna-menu-backdrop { background: rgba(35, 45, 56, .24) !important; }
}

/* A compact interaction language. */
body.tna-galaxy :is(a, button, summary) {
    transition:
        color var(--tui-motion-fast) ease,
        background-color var(--tui-motion-fast) ease,
        border-color var(--tui-motion-fast) ease,
        opacity var(--tui-motion-fast) ease,
        transform var(--tui-motion) var(--tui-ease);
}
body.tna-galaxy :is(button, .tna-btn, .tna-site-primary-action):active { transform: translateY(1px) scale(.99); }

.tna-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 360ms var(--tui-ease), transform 360ms var(--tui-ease);
}
.tna-reveal.is-visible { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
    .tna-card:hover,
    .tna-page-card:hover,
    .tna-feed-card:hover { border-color: var(--tui-border-strong) !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .tna-reveal { opacity: 1 !important; transform: none !important; }
}