/*
|--------------------------------------------------------------------------
| Tetology — Module 0
|--------------------------------------------------------------------------
|
| File:
|   themes.css
|
| Purpose:
|   Light, dark and system theme variable overrides for Module 0.
|
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Light theme
|--------------------------------------------------------------------------
*/

:root,
:root[data-theme="light"] {
    color-scheme: light;

    --color-page-bg: #f7f9fc;
    --color-surface: #ffffff;
    --color-surface-soft: #f1f5f9;
    --color-surface-elevated: #ffffff;

    --color-text: #172033;
    --color-text-secondary: #4b5870;
    --color-text-muted: #6b778c;
    --color-text-inverse: #ffffff;

    --color-border: #dbe3ee;
    --color-border-strong: #bcc8d8;

    --color-primary: #1d4ed8;
    --color-primary-hover: #1e40af;
    --color-primary-active: #1e3a8a;
    --color-primary-soft: #e8efff;

    --color-accent: #d6a700;
    --color-accent-soft: #fff8d8;

    --color-success: #15803d;
    --color-warning: #b45309;
    --color-danger: #b91c1c;
    --color-info: #0369a1;

    --color-focus: #2563eb;

    --gradient-page:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f5f8fc 100%
        );
}

/*
|--------------------------------------------------------------------------
| Dark theme
|--------------------------------------------------------------------------
*/

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

    --color-page-bg: #0b1220;
    --color-surface: #111827;
    --color-surface-soft: #172033;
    --color-surface-elevated: #182235;

    --color-text: #f8fafc;
    --color-text-secondary: #d6deea;
    --color-text-muted: #9ba8ba;
    --color-text-inverse: #0f172a;

    --color-border: #2a374b;
    --color-border-strong: #3a4a62;

    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-active: #bfdbfe;
    --color-primary-soft: #172a46;

    --color-accent: #facc15;
    --color-accent-soft: #342b0b;

    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-info: #38bdf8;

    --color-focus: #93c5fd;

    --gradient-page:
        linear-gradient(
            180deg,
            #0b1220 0%,
            #0f172a 100%
        );

    --shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.28);

    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, 0.3);

    --shadow-md:
        0 10px 28px rgba(0, 0, 0, 0.34);

    --shadow-lg:
        0 20px 52px rgba(0, 0, 0, 0.42);
}

/*
|--------------------------------------------------------------------------
| System theme
|--------------------------------------------------------------------------
|
| The JavaScript theme manager will remove data-theme or set it to
| "system" when the user chooses the operating-system preference.
|
|--------------------------------------------------------------------------
*/

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]),
    :root[data-theme="system"] {
        color-scheme: dark;

        --color-page-bg: #0b1220;
        --color-surface: #111827;
        --color-surface-soft: #172033;
        --color-surface-elevated: #182235;

        --color-text: #f8fafc;
        --color-text-secondary: #d6deea;
        --color-text-muted: #9ba8ba;
        --color-text-inverse: #0f172a;

        --color-border: #2a374b;
        --color-border-strong: #3a4a62;

        --color-primary: #60a5fa;
        --color-primary-hover: #93c5fd;
        --color-primary-active: #bfdbfe;
        --color-primary-soft: #172a46;

        --color-accent: #facc15;
        --color-accent-soft: #342b0b;

        --color-success: #4ade80;
        --color-warning: #fbbf24;
        --color-danger: #f87171;
        --color-info: #38bdf8;

        --color-focus: #93c5fd;

        --gradient-page:
            linear-gradient(
                180deg,
                #0b1220 0%,
                #0f172a 100%
            );

        --shadow-xs:
            0 1px 2px rgba(0, 0, 0, 0.28);

        --shadow-sm:
            0 2px 8px rgba(0, 0, 0, 0.3);

        --shadow-md:
            0 10px 28px rgba(0, 0, 0, 0.34);

        --shadow-lg:
            0 20px 52px rgba(0, 0, 0, 0.42);
    }
}

/*
|--------------------------------------------------------------------------
| Theme transition support
|--------------------------------------------------------------------------
|
| This class will be added briefly by JavaScript after the initial page
| paint, preventing a flash during startup.
|
|--------------------------------------------------------------------------
*/

.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal) !important;
}

/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .theme-transition,
    .theme-transition *,
    .theme-transition *::before,
    .theme-transition *::after {
        transition: none !important;
    }
}


/*
|--------------------------------------------------------------------------
| Dark theme — Landing page component overrides
|--------------------------------------------------------------------------
|
| These rules override component colors that cannot be controlled only
| through the general theme variables.
|
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Page and text rendering
|--------------------------------------------------------------------------
*/

:root[data-effective-theme="dark"] body,
:root[data-theme="dark"] body {
    background:
        var(--gradient-page),
        var(--color-page-bg);
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

:root[data-effective-theme="dark"] .site-header,
:root[data-theme="dark"] .site-header {
    border-bottom-color: rgba(71, 85, 105, 0.72);
    background: rgba(15, 23, 42, 0.88);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03),
        var(--shadow-xs);
}

:root[data-effective-theme="dark"] .site-brand__mark,
:root[data-theme="dark"] .site-brand__mark {
    color: #ffffff;
    border-color: rgba(147, 197, 253, 0.2);
}

:root[data-effective-theme="dark"] .header-control,
:root[data-theme="dark"] .header-control {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    background: var(--color-surface);
}

:root[data-effective-theme="dark"]
    .header-control:not(:disabled):hover,
:root[data-theme="dark"]
    .header-control:not(:disabled):hover {
    color: var(--color-primary-hover);
    border-color: rgba(147, 197, 253, 0.32);
    background: var(--color-primary-soft);
}

:root[data-effective-theme="dark"] .header-control:disabled,
:root[data-theme="dark"] .header-control:disabled {
    color: var(--color-text-muted);
    border-color: var(--color-border);
    background: var(--color-surface-soft);
}

:root[data-effective-theme="dark"] .header-launch-button,
:root[data-theme="dark"] .header-launch-button {
    color: #ffffff;
    box-shadow:
        0 8px 22px rgba(2, 6, 23, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/*
|--------------------------------------------------------------------------
| Header fallback
|--------------------------------------------------------------------------
*/

@supports not (
    (backdrop-filter: blur(1px))
    or
    (-webkit-backdrop-filter: blur(1px))
) {
    :root[data-effective-theme="dark"] .site-header,
    :root[data-theme="dark"] .site-header {
        background: rgba(15, 23, 42, 0.98);
    }
}

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

:root[data-effective-theme="dark"] .hero-section::before,
:root[data-theme="dark"] .hero-section::before {
    background:
        radial-gradient(
            circle,
            rgba(96, 165, 250, 0.16) 0%,
            rgba(96, 165, 250, 0.05) 44%,
            transparent 72%
        );
}

:root[data-effective-theme="dark"] .hero-section::after,
:root[data-theme="dark"] .hero-section::after {
    background:
        radial-gradient(
            circle,
            rgba(250, 204, 21, 0.11) 0%,
            rgba(250, 204, 21, 0.03) 46%,
            transparent 72%
        );
}

:root[data-effective-theme="dark"] .hero-eyebrow,
:root[data-theme="dark"] .hero-eyebrow {
    color: var(--color-primary-hover);
    border-color: rgba(96, 165, 250, 0.22);
    background: var(--color-primary-soft);
}

:root[data-effective-theme="dark"] .hero-eyebrow::before,
:root[data-theme="dark"] .hero-eyebrow::before {
    background: var(--color-primary);
    box-shadow:
        0 0 0 0.25rem rgba(96, 165, 250, 0.12);
}

:root[data-effective-theme="dark"] .hero-button--primary,
:root[data-theme="dark"] .hero-button--primary {
    color: #ffffff;
    box-shadow:
        0 12px 30px rgba(2, 6, 23, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

:root[data-effective-theme="dark"] .hero-button--secondary,
:root[data-theme="dark"] .hero-button--secondary {
    color: var(--color-text);
    border-color: var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

:root[data-effective-theme="dark"]
    .hero-button--secondary:hover,
:root[data-theme="dark"]
    .hero-button--secondary:hover {
    color: var(--color-primary-hover);
    border-color: rgba(147, 197, 253, 0.3);
    background: var(--color-primary-soft);
}

:root[data-effective-theme="dark"] .hero-benefits__icon,
:root[data-theme="dark"] .hero-benefits__icon {
    color: var(--color-success);
    background: rgba(74, 222, 128, 0.12);
}

/*
|--------------------------------------------------------------------------
| Hero application preview
|--------------------------------------------------------------------------
*/

:root[data-effective-theme="dark"] .hero-visual::before,
:root[data-theme="dark"] .hero-visual::before {
    background:
        linear-gradient(
            135deg,
            rgba(96, 165, 250, 0.14),
            rgba(250, 204, 21, 0.07)
        );
    opacity: 0.62;
}

:root[data-effective-theme="dark"] .hero-app-preview,
:root[data-theme="dark"] .hero-app-preview {
    border-color: var(--color-border);
    background: var(--color-surface-elevated);
    box-shadow:
        0 30px 72px rgba(0, 0, 0, 0.42),
        0 8px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-effective-theme="dark"]
    .hero-app-preview__topbar,
:root[data-theme="dark"]
    .hero-app-preview__topbar {
    border-bottom-color: var(--color-border);
    background:
        linear-gradient(
            180deg,
            #182235 0%,
            #111827 100%
        );
}

:root[data-effective-theme="dark"]
    .hero-app-preview__body,
:root[data-theme="dark"]
    .hero-app-preview__body {
    background:
        linear-gradient(
            180deg,
            #111827 0%,
            #0f172a 100%
        );
}

:root[data-effective-theme="dark"]
    .hero-app-preview__welcome,
:root[data-theme="dark"]
    .hero-app-preview__welcome {
    border-color: var(--color-border);
    background: var(--color-surface);
}

:root[data-effective-theme="dark"]
    .hero-app-preview__badge,
:root[data-theme="dark"]
    .hero-app-preview__badge {
    color: #ffffff;
}

:root[data-effective-theme="dark"]
    .hero-app-preview__status,
:root[data-theme="dark"]
    .hero-app-preview__status {
    color: var(--color-success);
    background: rgba(74, 222, 128, 0.12);
}

:root[data-effective-theme="dark"]
    .hero-app-preview__card,
:root[data-theme="dark"]
    .hero-app-preview__card {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    background:
        linear-gradient(
            180deg,
            #182235 0%,
            #111827 100%
        );
}

:root[data-effective-theme="dark"]
    .hero-app-preview__card:nth-child(1),
:root[data-theme="dark"]
    .hero-app-preview__card:nth-child(1) {
    background:
        linear-gradient(
            180deg,
            #172a46 0%,
            #111827 100%
        );
}

:root[data-effective-theme="dark"]
    .hero-app-preview__card:nth-child(2),
:root[data-theme="dark"]
    .hero-app-preview__card:nth-child(2) {
    background:
        linear-gradient(
            180deg,
            #342b0b 0%,
            #111827 100%
        );
}

:root[data-effective-theme="dark"]
    .hero-app-preview__card:nth-child(3),
:root[data-theme="dark"]
    .hero-app-preview__card:nth-child(3) {
    background:
        linear-gradient(
            180deg,
            #12301f 0%,
            #111827 100%
        );
}

/*
|--------------------------------------------------------------------------
| Features section
|--------------------------------------------------------------------------
*/

:root[data-effective-theme="dark"] .features-section,
:root[data-theme="dark"] .features-section {
    border-top-color: rgba(71, 85, 105, 0.58);
    background:
        linear-gradient(
            180deg,
            rgba(15, 23, 42, 0.96) 0%,
            rgba(11, 18, 32, 0.98) 100%
        );
}

:root[data-effective-theme="dark"]
    .section-heading__eyebrow,
:root[data-theme="dark"]
    .section-heading__eyebrow {
    color: #fde68a;
    border-color: rgba(250, 204, 21, 0.22);
    background: var(--color-accent-soft);
}

:root[data-effective-theme="dark"]
    .feature-card,
:root[data-theme="dark"]
    .feature-card {
    border-color: var(--color-border);
    background:
        linear-gradient(
            180deg,
            #182235 0%,
            #111827 100%
        );
    box-shadow: var(--shadow-sm);
}

:root[data-effective-theme="dark"]
    .feature-card:hover,
:root[data-theme="dark"]
    .feature-card:hover {
    border-color: rgba(147, 197, 253, 0.3);
    box-shadow: var(--shadow-md);
}

:root[data-effective-theme="dark"]
    .feature-card__icon--study,
:root[data-theme="dark"]
    .feature-card__icon--study {
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.18);
    background: #172a46;
}

:root[data-effective-theme="dark"]
    .feature-card__icon--practice,
:root[data-theme="dark"]
    .feature-card__icon--practice {
    color: #fde68a;
    border-color: rgba(253, 230, 138, 0.18);
    background: #342b0b;
}

:root[data-effective-theme="dark"]
    .feature-card__icon--progress,
:root[data-theme="dark"]
    .feature-card__icon--progress {
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.18);
    background: #12301f;
}

:root[data-effective-theme="dark"]
    .feature-card__icon--language,
:root[data-theme="dark"]
    .feature-card__icon--language {
    color: #c4b5fd;
    border-color: rgba(196, 181, 253, 0.18);
    background: #2b2049;
}

:root[data-effective-theme="dark"]
    .feature-card__icon--device,
:root[data-theme="dark"]
    .feature-card__icon--device {
    color: #7dd3fc;
    border-color: rgba(125, 211, 252, 0.18);
    background: #102b3b;
}

:root[data-effective-theme="dark"]
    .feature-card__icon--security,
:root[data-theme="dark"]
    .feature-card__icon--security {
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.18);
    background: #3b171b;
}

/*
|--------------------------------------------------------------------------
| Launch section
|--------------------------------------------------------------------------
*/

:root[data-effective-theme="dark"] .launch-section,
:root[data-theme="dark"] .launch-section {
    background:
        linear-gradient(
            180deg,
            #0b1220 0%,
            #0f172a 100%
        );
}

:root[data-effective-theme="dark"] .launch-panel,
:root[data-theme="dark"] .launch-panel {
    border-color: rgba(96, 165, 250, 0.18);
    box-shadow:
        0 30px 74px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-effective-theme="dark"]
    .launch-panel__button--primary,
:root[data-theme="dark"]
    .launch-panel__button--primary {
    color: #172033;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #e8eef7 100%
        );
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

:root[data-effective-theme="dark"] .site-footer,
:root[data-theme="dark"] .site-footer {
    border-top-color: rgba(71, 85, 105, 0.58);
    background:
        linear-gradient(
            180deg,
            #080d18 0%,
            #0b1220 100%
        );
}

:root[data-effective-theme="dark"]
    .site-footer__brand-mark,
:root[data-theme="dark"]
    .site-footer__brand-mark {
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| No-JavaScript warning
|--------------------------------------------------------------------------
*/

:root[data-effective-theme="dark"] .noscript-warning,
:root[data-theme="dark"] .noscript-warning {
    color: #fed7aa;
    border-color: rgba(251, 191, 36, 0.28);
    background: #3b2508;
}


/*
|--------------------------------------------------------------------------
| System dark theme — pre-JavaScript fallback
|--------------------------------------------------------------------------
*/

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .site-header,
    :root[data-theme="system"] .site-header {
        border-bottom-color: rgba(71, 85, 105, 0.72);
        background: rgba(15, 23, 42, 0.88);
    }

    :root:not([data-theme]) .header-launch-button,
    :root[data-theme="system"] .header-launch-button,
    :root:not([data-theme]) .site-brand__mark,
    :root[data-theme="system"] .site-brand__mark,
    :root:not([data-theme]) .hero-button--primary,
    :root[data-theme="system"] .hero-button--primary,
    :root:not([data-theme]) .hero-app-preview__badge,
    :root[data-theme="system"] .hero-app-preview__badge {
        color: #ffffff;
    }

    :root:not([data-theme]) .hero-app-preview,
    :root[data-theme="system"] .hero-app-preview {
        border-color: var(--color-border);
        background: var(--color-surface-elevated);
    }

    :root:not([data-theme]) .hero-app-preview__topbar,
    :root[data-theme="system"] .hero-app-preview__topbar {
        background:
            linear-gradient(
                180deg,
                #182235 0%,
                #111827 100%
            );
    }

    :root:not([data-theme]) .hero-app-preview__body,
    :root[data-theme="system"] .hero-app-preview__body {
        background:
            linear-gradient(
                180deg,
                #111827 0%,
                #0f172a 100%
            );
    }

    :root:not([data-theme]) .features-section,
    :root[data-theme="system"] .features-section {
        background:
            linear-gradient(
                180deg,
                rgba(15, 23, 42, 0.96) 0%,
                rgba(11, 18, 32, 0.98) 100%
            );
    }

    :root:not([data-theme]) .feature-card,
    :root[data-theme="system"] .feature-card {
        border-color: var(--color-border);
        background:
            linear-gradient(
                180deg,
                #182235 0%,
                #111827 100%
            );
    }

    :root:not([data-theme]) .launch-section,
    :root[data-theme="system"] .launch-section {
        background:
            linear-gradient(
                180deg,
                #0b1220 0%,
                #0f172a 100%
            );
    }

    :root:not([data-theme]) .site-footer,
    :root[data-theme="system"] .site-footer {
        background:
            linear-gradient(
                180deg,
                #080d18 0%,
                #0b1220 100%
            );
    }
}