/* ════════════════════════════════════════════════════════════
   T-TOOL PRO  —  theme.css
   Single source of truth for ALL colour tokens.
   Dark = default (:root). Light = [data-theme="light"] override.
   Edit colours here ONLY — never in page files.
════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   DARK THEME  (default)
   Deep navy-black base + amber brand
══════════════════════════════════════════════════════════ */
:root, [data-theme="dark"] {
    /* ── Backgrounds
       Warm dark grey — not cold blue-black, not pure black.
       Similar to GitHub Dark / VS Code / Linear.
       Enough contrast between layers without eye strain.        ── */
    --bg:      #1c1c1e;   /* warm dark grey base — iOS-style dark    */
    --bg2:     #242426;   /* cards — clearly distinct from base      */
    --bg3:     #2c2c2e;   /* hover / alt surfaces                    */
    --bg4:     #363638;   /* active states / deepest cards           */

    /* ── Borders — warm, visible but not harsh ── */
    --bd:      rgba(255,255,255,0.11);
    --bd2:     rgba(255,255,255,0.20);

    /* ── Brand — amber (unchanged) ── */
    --a:       #f5a020;
    --a2:      #e08c10;
    --a3:      #ffc04a;
    --aglow:   rgba(245,160,32,0.22);
    --adim:    rgba(245,160,32,0.10);

    /* ── Text — warm white, not harsh pure white ── */
    --txt:     #f0f0f0;   /* warm off-white — no blue tint           */
    --txt2:    #ababab;   /* secondary — clearly readable            */
    --mut:     #717171;   /* muted — visible without straining       */
    --muted:   #717171;

    /* ── Misc ── */
    --card:    rgba(255,255,255,0.04);
    --green:   #30d158;   /* Apple green — softer than neon          */
    --red:     #ff453a;   /* Apple red — softer than pure red        */

    /* ── Component shortcuts ── */
    --nav-bg:        rgba(28,28,30,0.92);
    --footer-bg:     #141414;
    --breadcrumb-bg: #242426;
    --card-bg:       #242426;
    --card-hdr:      #2c2c2e;
    --input-bg:      #2c2c2e;
    --scrollbar:     #3a3a3c;

    /* ── Shadows ── */
    --shadow-sm:  0 1px 4px rgba(0,0,0,0.35);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.55);
    --shadow-glow: 0 0 28px rgba(245,160,32,0.18);
}

/* ══════════════════════════════════════════════════════════
   LIGHT THEME
   Clean cool-white base — Vercel / Linear / Stripe inspired.
   Crisp, modern, professional. Amber brand stays vibrant.
══════════════════════════════════════════════════════════ */
[data-theme="light"] {

    /* ── Backgrounds: clean neutral white — no colour cast ── */
    --bg:      #f5f5f7;   /* Apple-style light grey base     */
    --bg2:     #ffffff;   /* pure white cards                */
    --bg3:     #f0f0f2;   /* subtle grey for hover/alt       */
    --bg4:     #e8e8ed;   /* slightly deeper for active      */

    /* ── Borders: clean neutral grey ── */
    --bd:      rgba(0,0,0,0.09);
    --bd2:     rgba(0,0,0,0.16);

    /* ── Brand — vivid amber on light ── */
    --a:       #e07800;   /* vibrant amber — not muddy brown */
    --a2:      #c46200;   /* darker for gradients            */
    --a3:      #f59500;   /* lighter highlight               */
    --aglow:   rgba(224,120,0,0.20);
    --adim:    rgba(224,120,0,0.08);

    /* ── Text: clean neutral dark — no warm/cool cast ── */
    --txt:     #111111;   /* near-black — crisp & readable   */
    --txt2:    #444444;   /* secondary — clear contrast      */
    --mut:     #888888;   /* muted — soft but readable       */
    --muted:   #888888;

    /* ── Misc ── */
    --card:    rgba(0,0,0,0.03);
    --green:   #1c7a3e;
    --red:     #d93025;

    /* ── Component shortcuts ── */
    --nav-bg:        rgba(255,255,255,0.92);
    --footer-bg:     #111111;   /* dark footer anchors the page */
    --breadcrumb-bg: #f5f5f7;
    --card-bg:       #ffffff;
    --card-hdr:      #f5f5f7;
    --input-bg:      #ffffff;
    --scrollbar:     #d0d0d5;

    /* ── Shadows: clean neutral depth ── */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 28px rgba(224,120,0,0.18);
}

/* ══════════════════════════════════════════════════════════
   GLOBAL BASE STYLES
══════════════════════════════════════════════════════════ */

/* Smooth theme transitions */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition:
        background-color .28s ease,
        border-color     .28s ease,
        color            .28s ease,
        box-shadow       .28s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--txt);
    overflow-x: hidden;
}

/* ── Light mode: clean body — no texture or tint ── */
[data-theme="light"] body {
    background-image: none;
}

/* ── Light mode: suppress all overlays — clean white ── */
[data-theme="light"] body::before { opacity: 0 !important; }
[data-theme="light"] body::after  { opacity: 0 !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--a2); }

/* ══════════════════════════════════════════════════════════
   LIGHT MODE COMPONENT OVERRIDES
   Clean neutral — no warm/brown tints
══════════════════════════════════════════════════════════ */

/* ── Cards ── */
[data-theme="light"] .fcard,
[data-theme="light"] .dc,
[data-theme="light"] .dl-card,
[data-theme="light"] .form-card,
[data-theme="light"] .accordion-item,
[data-theme="light"] .tl-entry .tl-toggle-inner,
[data-theme="light"] .brand-card,
[data-theme="light"] .extra-card,
[data-theme="light"] .mode-card,
[data-theme="light"] .ci-card,
[data-theme="light"] .rc,
[data-theme="light"] .feat-header-card,
[data-theme="light"] .feat-content-wrap,
[data-theme="light"] .feat-sidebar,
[data-theme="light"] .cs-panel {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.09) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}

[data-theme="light"] .fcard:hover,
[data-theme="light"] .dc:hover,
[data-theme="light"] .brand-card:hover,
[data-theme="light"] .extra-card:hover,
[data-theme="light"] .mode-card:hover,
[data-theme="light"] .rc:hover {
    border-color: rgba(224,120,0,0.30) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important;
    transform: translateY(-3px);
}

/* ── Section backgrounds ── */
[data-theme="light"] .services.section,
[data-theme="light"] .services.section.bg-card,
[data-theme="light"] section.about.section,
[data-theme="light"] .brands-section,
[data-theme="light"] .swiper-section,
[data-theme="light"] section#faqs,
[data-theme="light"] section#resellers,
[data-theme="light"] section#drivers,
[data-theme="light"] section#download,
[data-theme="light"] section#contact-us,
[data-theme="light"] section#models-page,
[data-theme="light"] section#features-page {
    background: var(--bg) !important;
}

[data-theme="light"] .services.section.bg-card,
[data-theme="light"] .about.section,
[data-theme="light"] .swiper-section {
    background: #ffffff !important;
    border-top: 1px solid rgba(0,0,0,0.07) !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}

/* ── Navigation ── */
[data-theme="light"] .header.navbar-area,
[data-theme="light"] header.header {
    background: rgba(255,255,255,0.92) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 12px rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .navbar-nav .nav-item a {
    color: #444444 !important;
}
[data-theme="light"] .navbar-nav .nav-item a:hover,
[data-theme="light"] .navbar-nav .nav-item a.active {
    color: var(--a) !important;
    border-bottom-color: var(--a) !important;
}
[data-theme="light"] .sub-menu {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.09) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}

/* ── Breadcrumbs ── */
[data-theme="light"] .breadcrumbs {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .page-title { color: var(--txt) !important; }
[data-theme="light"] .breadcrumb-nav { color: var(--mut) !important; }

/* ── Stats bar ── */
[data-theme="light"] .stats-bar {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.07) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .stat-item {
    border-color: rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .stat-label { color: #888888 !important; }

/* ── Text ── */
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 { color: var(--txt) !important; }
[data-theme="light"] p   { color: var(--mut) !important; }
[data-theme="light"] .section-title h2,
[data-theme="light"] .sec-hdr h2 { color: var(--txt) !important; }
[data-theme="light"] .section-title p,
[data-theme="light"] .sec-hdr p  { color: var(--mut) !important; }

/* ── Inputs & Forms ── */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] .fi,
[data-theme="light"] #s_email,
[data-theme="light"] .faq-search-wrap input,
[data-theme="light"] .models-search-wrap input {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.14) !important;
    color: #111111 !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .fi:focus {
    border-color: var(--a) !important;
    box-shadow: 0 0 0 3px rgba(224,120,0,0.10) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: var(--mut) !important; }

/* ── Story cards ── */
[data-theme="light"] .story-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .story-card:hover {
    border-color: rgba(224,120,0,0.25) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.09) !important;
}
[data-theme="light"] .story-dot {
    background: var(--a) !important;
    box-shadow: 0 0 8px rgba(224,120,0,0.3) !important;
}
[data-theme="light"] .story-model { color: #111111 !important; }
[data-theme="light"] .story-desc  { color: #888888 !important; }

/* ── Brand logo tiles ── */
[data-theme="light"] .brand-tile {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .brand-tile:hover {
    background: var(--bg3) !important;
    border-color: rgba(224,120,0,0.25) !important;
}
[data-theme="light"] .brand-tile img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(30%) saturate(500%) hue-rotate(10deg) brightness(0.7) !important;
}
[data-theme="light"] .brand-tile:hover img {
    filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(800%) hue-rotate(5deg) brightness(0.75) !important;
}

/* ── Owl carousel logos ── */
[data-theme="light"] .owl-carousel .item img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(30%) saturate(400%) hue-rotate(10deg) brightness(0.75) !important;
}
[data-theme="light"] .owl-carousel .item img:hover {
    filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(800%) hue-rotate(5deg) brightness(0.7) !important;
}

/* ── CTA box ── */
[data-theme="light"] .cta-box,
[data-theme="light"] .cta-section .cta-box {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.09) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .cta-box h2 { color: #111111 !important; }
[data-theme="light"] .cta-box p  { color: #888888 !important; }
[data-theme="light"] .cta-box::before {
    background: radial-gradient(ellipse at 50% 0%,
        rgba(224,120,0,0.06) 0%, transparent 60%) !important;
}

/* ── Footer — stays dark in light mode for contrast ── */
[data-theme="light"] footer.footer.section,
[data-theme="light"] .footer-area {
    background: #1a1208 !important;
    border-top: 1px solid rgba(184,92,0,0.2) !important;
}
[data-theme="light"] .copyright-area {
    background: #110d05 !important;
    border-top: 1px solid rgba(184,92,0,0.15) !important;
}
[data-theme="light"] footer h3,
[data-theme="light"] footer h4 { color: #e8d5b0 !important; }
[data-theme="light"] footer p,
[data-theme="light"] .copyright-text,
[data-theme="light"] .copyright-owner { color: #9a8878 !important; }
[data-theme="light"] footer a,
[data-theme="light"] .footer-area a { color: #9a8878 !important; }
[data-theme="light"] footer a:hover,
[data-theme="light"] .footer-area a:hover { color: var(--a) !important; }
[data-theme="light"] .footer .social li a {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #9a8878 !important;
}
[data-theme="light"] .footer .social li a:hover {
    border-color: var(--a) !important;
    color: var(--a) !important;
    background: rgba(184,92,0,0.12) !important;
}
[data-theme="light"] #s_email {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #e8d5b0 !important;
}

/* ── Theme toggle button ── */
[data-theme="light"] #theme-toggle {
    background: #ffffff !important;
    border-color: rgba(180,120,20,0.25) !important;
    color: var(--a) !important;
    box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] #theme-toggle:hover {
    border-color: var(--a) !important;
    box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] #theme-toggle .i-moon { display: none !important; }
[data-theme="light"] #theme-toggle .i-sun  { display: block !important; }

/* ── Preloader ── */
[data-theme="light"] .preloader {
    background: var(--bg) !important;
}

/* ── Scroll to top ── */
[data-theme="light"] .scroll-top {
    background: #ffffff !important;
    border-color: rgba(180,120,20,0.2) !important;
    color: var(--mut) !important;
    box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .scroll-top:hover {
    border-color: var(--a) !important;
    color: var(--a) !important;
}

/* ── Model cards (Swiper) ── */
[data-theme="light"] .model-card {
    background: #ffffff !important;
    border-color: rgba(180,120,20,0.15) !important;
    box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .model-card:hover {
    border-color: rgba(184,92,0,0.3) !important;
    box-shadow: var(--shadow-md) !important;
}
[data-theme="light"] .model-name  { color: var(--txt) !important; }
[data-theme="light"] .model-brand { color: var(--mut) !important; }

/* ── Success stories marquee strip ── */
[data-theme="light"] .marquee-container {
    background: #fff8ee !important;
    border-color: rgba(184,92,0,0.2) !important;
}
[data-theme="light"] marquee { color: var(--txt2) !important; }

/* ── Hero area ── */
[data-theme="light"] .hero-area::before {
    background:
        radial-gradient(ellipse 90% 80% at 50% 50%,
            rgba(253,248,242,0.82) 0%,
            rgba(253,248,242,0.96) 60%,
            rgba(253,248,242,1.0)  100%) !important;
}

/* ── Social pills (hero) ── */
[data-theme="light"] .social-pill {
    background: rgba(255,255,255,0.80) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #444444 !important;
}
[data-theme="light"] .social-pill:hover {
    border-color: var(--a) !important;
    color: var(--a) !important;
    background: rgba(224,120,0,0.07) !important;
}

/* ── About section list items ── */
[data-theme="light"] .single-list {
    background: #f5f5f7 !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .single-list h4 { color: #111111 !important; }

/* ── FAQ accordion ── */
[data-theme="light"] .accordion-item {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.09) !important;
}
[data-theme="light"] .accordion-item.open {
    border-color: rgba(224,120,0,0.28) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .acc-q-text  { color: #111111 !important; }
[data-theme="light"] .accordion-body { border-color: rgba(0,0,0,0.07) !important; }

/* ── Chipset tabs (about page) ── */
[data-theme="light"] .cs-pill {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: #444444 !important;
}
[data-theme="light"] .cs-pill:hover {
    background: #f5f5f7 !important;
    border-color: rgba(224,120,0,0.25) !important;
}
[data-theme="light"] .cs-pill.active {
    background: rgba(224,120,0,0.08) !important;
    border-color: rgba(224,120,0,0.30) !important;
    color: var(--a) !important;
}
[data-theme="light"] .cs-panel {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.09) !important;
}
[data-theme="light"] .cs-panel-hdr {
    background: #f5f5f7 !important;
    border-color: rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .cs-panel-title  { color: var(--txt) !important; }
[data-theme="light"] .cs-rich-content { color: var(--txt2) !important; }
[data-theme="light"] .cs-rich-content h2,
[data-theme="light"] .cs-rich-content h3,
[data-theme="light"] .cs-rich-content strong { color: var(--txt) !important; }
[data-theme="light"] .cs-chip {
    background: rgba(184,92,0,0.07) !important;
    border-color: rgba(184,92,0,0.18) !important;
    color: var(--txt2) !important;
}
[data-theme="light"] .cs-chip:hover {
    background: rgba(184,92,0,0.14) !important;
    border-color: rgba(184,92,0,0.32) !important;
    color: var(--txt) !important;
}