/* =========================================================
   TYPECLIMB GLOBAL THEME SYSTEM
========================================================= */

:root {
    /* -----------------------------------------------------
       LIGHT THEME
    ----------------------------------------------------- */

    --tc-bg: #f7f9fc;
    --tc-surface: #ffffff;
    --tc-surface-alt: #f8fafc;

    --tc-text: #111827;
    --tc-text-secondary: #374151;
    --tc-text-muted: #6b7280;

    --tc-border: #e5e7eb;
    --tc-border-strong: #d1d5db;

    --tc-hover: #f3f4f6;

    --tc-primary: #2563eb;
    --tc-primary-dark: #1d4ed8;

    --tc-success: #16a34a;
    --tc-warning: #d97706;
    --tc-danger: #dc2626;
    --tc-danger-hover: #fee2e2;
    --tc-info: #2563eb;

    --tc-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06);

    --tc-shadow-lg:
        0 12px 30px rgba(0, 0, 0, 0.10);

    --tc-overlay:
        rgba(15, 23, 42, 0.45);

    color-scheme: light;
}


/* =========================================================
   DARK THEME
========================================================= */

html[data-theme="dark"] {

    --tc-bg: #0f172a;
    --tc-surface: #111827;
    --tc-surface-alt: #1f2937;

    --tc-text: #f9fafb;
    --tc-text-secondary: #d1d5db;
    --tc-text-muted: #9ca3af;

    --tc-border: #374151;
    --tc-border-strong: #4b5563;

    --tc-hover: #1f2937;

    --tc-primary: #60a5fa;
    --tc-primary-dark: #3b82f6;

    --tc-success: #4ade80;
    --tc-warning: #fbbf24;
    --tc-danger: #f87171;
    --tc-danger-hover: #3f1d24;
    --tc-info: #60a5fa;

    --tc-shadow:
        0 4px 16px rgba(0, 0, 0, 0.30);

    --tc-shadow-lg:
        0 12px 30px rgba(0, 0, 0, 0.45);

    --tc-overlay:
        rgba(0, 0, 0, 0.65);

    color-scheme: dark;
}


/* =========================================================
   GLOBAL BASE
========================================================= */

html,
body {
    background-color: var(--tc-bg);
    color: var(--tc-text);
}


/* =========================================================
   THEME TRANSITION
   Keep this limited to visual properties.
========================================================= */

body,
.mainHeader,
.header-menu,
.profile-dropdown,
.footer-card,
input,
textarea,
select,
button {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible {
    outline: 2px solid var(--tc-primary);
    outline-offset: 2px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}