/* ==========================================================================
   Teccmark Global Theme System
   Dark / Light / System — CSS Custom Properties
   ========================================================================== */

/* ── Smooth theme transition ── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                fill 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ==========================================================================
   DARK MODE (Default)
   ========================================================================== */
:root,
[data-theme="dark"] {
    /* ── Backgrounds ── */
    --tm-bg:          #04080f;
    --tm-bg2:         #080d1a;
    --tm-bg3:         #0a0f1e;
    --tm-surface:     rgba(255, 255, 255, 0.03);
    --tm-surface2:    rgba(255, 255, 255, 0.05);
    --tm-surface-hover: rgba(255, 255, 255, 0.07);

    /* ── Text ── */
    --tm-text:        #f8faff;
    --tm-text-secondary: #d1d9e6;
    --tm-muted:       #94a3b8;
    --tm-muted2:      #71717a;

    /* ── Borders ── */
    --tm-border:      rgba(255, 255, 255, 0.1);
    --tm-border-light: rgba(255, 255, 255, 0.15);
    --tm-border-strong: rgba(255, 255, 255, 0.22);

    /* ── Cards / Glass ── */
    --tm-card-bg:     rgba(255, 255, 255, 0.03);
    --tm-card-bg2:    rgba(255, 255, 255, 0.045);
    --tm-glass-bg:    rgba(16, 25, 46, 0.4);
    --tm-glass-bg2:   rgba(25, 38, 68, 0.5);

    /* ── Accents (shared, same in both modes) ── */
    --tm-primary:     #818cf8;
    --tm-primary-glow: rgba(129, 140, 248, 0.25);
    --tm-cyan:        #67e8f9;
    --tm-violet:      #c4b5fd;
    --tm-green:       #34d399;
    --tm-red:         #fb7185;
    --tm-amber:       #fbbf24;
    --tm-blue:        #60a5fa;

    /* ── Shadows ── */
    --tm-shadow-sm:   0 4px 6px rgba(0, 0, 0, 0.3);
    --tm-shadow-md:   0 10px 25px rgba(0, 0, 0, 0.4);
    --tm-shadow-lg:   0 20px 40px rgba(0, 0, 0, 0.5);
    --tm-shadow-glow: 0 0 30px rgba(99, 102, 241, 0.4);
    --tm-shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255,255,255,0.06);

    /* ── Navbar ── */
    --tm-nav-bg:      rgba(3, 6, 14, 0.6);
    --tm-nav-bg-scroll: rgba(3, 6, 14, 0.85);
    --tm-nav-link:    #7b87a2;
    --tm-nav-link-hover: #eef2ff;

    /* ── Footer ── */
    --tm-footer-bg:   #0a0a0f;
    --tm-footer-text: rgba(255, 255, 255, 0.38);
    --tm-footer-heading: rgba(255, 255, 255, 0.9);
    --tm-footer-copy: rgba(255, 255, 255, 0.28);
    --tm-footer-icon-bg: rgba(129, 140, 248, 0.1);
    --tm-footer-icon-border: rgba(129, 140, 248, 0.18);
    --tm-footer-social-bg: rgba(255, 255, 255, 0.04);
    --tm-footer-social-border: rgba(255, 255, 255, 0.09);
    --tm-footer-social-color: rgba(255, 255, 255, 0.45);
    --tm-footer-divider: rgba(255, 255, 255, 0.07);

    /* ── Scrollbar ── */
    --tm-scrollbar-track: #0f172a;
    --tm-scrollbar-thumb: var(--tm-primary);

    /* ── Misc ── */
    --tm-body-img: radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
                   radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
    --tm-overlay:     rgba(0, 0, 0, 0.6);
    --tm-input-bg:    rgba(255, 255, 255, 0.03);
    --tm-input-bg-focus: rgba(255, 255, 255, 0.06);
    --tm-input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    --tm-hero-grid:   rgba(99, 102, 241, 0.04);
    --tm-hero-glow:   rgba(99, 102, 241, 0.12);
    --tm-code-bg:     rgba(0, 0, 0, 0.2);
    --tm-invert:      0;
}