/**
 * TapGo — Global Theme Variables
 * Loaded on ALL front-end pages via tapgo-theme-loader.php.
 *
 * Dark mode:  html.tg-dark  (set by anti-flash script + toggle JS)
 * Light mode: default (:root)
 *
 * This file owns --tg-* and --tma-* custom properties.
 * Dokan vendor dashboard (always dark) is handled separately.
 */

/* ─────────────────────────────────────────────────────────────
   ACCENT COLORS — never change between modes
───────────────────────────────────────────────────────────── */
:root {
    --tg-green:    #B7F51E;
    --tg-green-d:  #9fd919;
    --tma-green:   #B7F51E;
    --tma-green-d: #9fd919;
    --tma-red:     #f87171;
    --tma-font:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   LIGHT MODE (default)
───────────────────────────────────────────────────────────── */
:root {
    /* Core semantic palette */
    --tg-bg:        #ffffff;
    --tg-surface:   #f5f5f5;
    --tg-card:      #ffffff;
    --tg-text:      #111111;
    --tg-text-2:    #6b6b6b;
    --tg-border:    #e8e8e8;
    --tg-input-bg:  #f5f5f5;
    --tg-input-brd: #e0e0e0;
    --tg-shadow:    rgba(0,0,0,0.08);
    --tg-overlay:   rgba(0,0,0,0.45);
    --tg-nav-bg:    rgba(255,255,255,0.92);

    /* Homepage legacy aliases (used by qraveler-homepage.css) */
    --tg-black: #111111;
    --tg-gray:  #F5F5F5;
    --tg-white: #FFFFFF;
    --tg-muted: #6B6B6B;

    /* My-account page aliases (light values) */
    --tma-black:   #ffffff;
    --tma-surface: #f0f0f0;
    --tma-card:    #ffffff;
    --tma-border:  #e0e0e0;
    --tma-white:   #111111;
    --tma-gray:    #6b6b6b;
}

/* ─────────────────────────────────────────────────────────────
   DARK MODE — activated by html.tg-dark
───────────────────────────────────────────────────────────── */
html.tg-dark {
    /* Core semantic palette */
    --tg-bg:        #0f0f0f;
    --tg-surface:   #161616;
    --tg-card:      #1c1c1c;
    --tg-text:      #f0f0f0;
    --tg-text-2:    #909090;
    --tg-border:    #2a2a2a;
    --tg-input-bg:  #1e1e1e;
    --tg-input-brd: #333333;
    --tg-shadow:    rgba(0,0,0,0.35);
    --tg-overlay:   rgba(0,0,0,0.70);
    --tg-nav-bg:    rgba(10,10,10,0.92);

    /* Homepage legacy aliases (dark) */
    --tg-black: #f0f0f0;
    --tg-gray:  #1c1c1c;
    --tg-white: #0f0f0f;
    --tg-muted: #909090;

    /* My-account page aliases (dark values) */
    --tma-black:   #0a0a0a;
    --tma-surface: #111111;
    --tma-card:    #161616;
    --tma-border:  #222222;
    --tma-white:   #f5f5f5;
    --tma-gray:    #888888;
}

/* ─────────────────────────────────────────────────────────────
   SMOOTH TRANSITIONS — only after initial load (no flash)
   Added by global JS 50ms after DOMContentLoaded
───────────────────────────────────────────────────────────── */
html.tg-theme-ready body,
html.tg-theme-ready .tma-wrap,
html.tg-theme-ready .tg-nav,
html.tg-theme-ready .tg-hero,
html.tg-theme-ready .tg-section,
html.tg-theme-ready .tg-stats-bar,
html.tg-theme-ready .tg-auth-panel,
html.tg-theme-ready .tma-topbar,
html.tg-theme-ready .tma-auth-side,
html.tg-theme-ready .tma-hero,
html.tg-theme-ready .tma-card,
html.tg-theme-ready .tma-pf-input,
html.tg-theme-ready .tma-tab {
    transition: background-color 0.22s ease, color 0.18s ease, border-color 0.22s ease;
}

/* ─────────────────────────────────────────────────────────────
   THEME TOGGLE BUTTON — universal style for all pages
   Use class .tg-topbar-toggle + data-tg-toggle attribute
───────────────────────────────────────────────────────────── */
.tg-topbar-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--tma-border);
    background: transparent;
    color: var(--tma-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tg-topbar-toggle:hover {
    background: var(--tma-surface);
    color: var(--tma-white);
    border-color: var(--tma-border);
}
.tg-topbar-toggle:focus,
.tg-topbar-toggle:focus-visible,
.tg-topbar-toggle:active {
    outline: none !important;
    box-shadow: none !important;
}