/* ================================================
   LiberalVibe.com — Design Tokens / CSS Variables
   Extraído do layout HTML de referência
   ================================================ */

@font-face {
    font-family: 'Great Vibes Test';
    src: url('../fonts/great-vibes/great-vibes-regular.ttf') format('truetype');
    font-display: swap;
}

:root {
    /* === DARK MODE (Padrão) === */
    --bg-body: #000000;
    --bg-main: #161620;
    --bg-feed: #0a0a0a;
    --bg-input: #1a1a24;
    --bg-card: #1c1c1c;

    --text-primary: #ffffff;
    --text-secondary: #71767b;
    --text-muted: #536471;

    --border-color: #2f3336;
    --border-dashed: #3a3f44;
    --hover-bg: rgba(255, 255, 255, 0.05);
    --accent-color: #ffffff;

    /* === Cores Específicas === */
    --btn-green: #1cb561;
    --btn-green-bright: #25d366;
    --btn-pink: #e91e63;
    --btn-pink-hover: #c2185b;
    --btn-danger: #e74c3c;

    /* === Badges Mobile === */
    --m-badge-bg-grey: #1a1a1a;
    --m-badge-bg-red: #2a1118;
    --m-badge-bg-olive: #29240f;

    /* === Badges Desktop === */
    --badge-bg-grey: #2f3336;
    --badge-bg-purple: #322233;
    --badge-text-purple: #e7e9ea;
    --badge-bg-orange: #3a2216;

    /* === Status === */
    --notification-red: #f91880;
    --online-green: #00ba7c;
    --heart-red: #ff0000;
    --like-yellow: #f1c40f;

    /* === Tipografia === */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-landing: 'Montserrat', 'Inter', sans-serif;
    --font-brand-script: 'Great Vibes Test', 'Montserrat', 'Inter', sans-serif;

    /* === Espaçamentos === */
    --sidebar-left-width: 310px;
    --feed-center-width: 610px;
    --sidebar-right-width: 250px;
    --layout-total-width: 1170px;

    /* === Border Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-pill: 30px;
    --radius-circle: 50%;

    /* === Transições === */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* === Z-Index Scale === */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-tooltip: 9999;
    --z-mobile-nav: 1000;
}

/* === LIGHT MODE ===
   Seletor duplo: html.light-mode (anti-FOUC) e body.light-mode (theme.js após load)
*/
html.light-mode,
.light-mode {
    --bg-body: #f7f9f9;
    --bg-main: #ffffff;
    --bg-feed: #f4f7f9;
    --bg-input: #e8ecef;
    --bg-card: #f0f0f0;

    --text-primary: #0f1419;
    --text-secondary: #536471;
    --text-muted: #71767b;

    --border-color: #eff3f4;
    --border-dashed: #d1d9dd;
    --hover-bg: rgba(0, 0, 0, 0.05);
    --accent-color: #0f1419;

    --m-badge-bg-grey: #e1e8ed;
    --m-badge-bg-red: #fce8ee;
    --m-badge-bg-olive: #fcf8e3;

    --badge-bg-grey: #e1e8ed;
    --badge-bg-purple: #f3e8f9;
    --badge-text-purple: #1a1a2e;
    --badge-bg-orange: #fef3e2;
}

/* ================================================================
   LIGHT MODE — Overrides de elementos com cores hardcoded
   Necessários para cobrir regras que usam #161620 etc. diretamente
   ================================================================ */

/* Fundo geral */
.light-mode body,
body.light-mode { background-color: var(--bg-body); color: var(--text-primary); }
.light-mode .layout-container { background-color: var(--bg-body); }
.light-mode .feed-center { background: var(--bg-feed); }
.light-mode .sidebar-left,
.light-mode .sidebar-right { background-color: var(--bg-main); }
.light-mode .inbox-header { background: var(--bg-main); }

/* Feed header */
.light-mode .feed-header { background-color: var(--bg-main) !important; border-bottom-color: var(--border-color) !important; }

/* Mobile header topo */
.light-mode .mobile-new-header { background-color: var(--bg-main) !important; border-bottom: 1px solid var(--border-color) !important; }
.light-mode .m-h-text-logo .white { color: var(--text-primary) !important; }
.light-mode #mobileThemeToggle { color: #f59e0b !important; border-color: rgba(245,158,11,.4) !important; background: rgba(245,158,11,.1) !important; }

/* Mobile bottom nav (rodapé) */
.light-mode .mobile-bottom-nav { background-color: var(--bg-main) !important; border-top-color: var(--border-color) !important; }
.light-mode .mobile-bottom-nav .nav-item { color: var(--text-secondary) !important; }
.light-mode .mobile-bottom-nav .nav-item.active { color: var(--btn-pink) !important; }
.light-mode .mobile-bottom-nav .nav-item-label { color: inherit !important; }

/* Feed tabs mobile (abas principais) */
.light-mode .feed-tabs-mobile { background-color: var(--bg-main) !important; border-top-color: var(--border-color) !important; border-bottom-color: var(--btn-pink) !important; }
.light-mode .tab-box { background: rgba(0,0,0,0.04) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; }
.light-mode .tab-box .tab-label { color: var(--text-primary) !important; }
.light-mode .tab-box.active { background: var(--btn-pink) !important; color: #fff !important; border-color: var(--btn-pink) !important; }

/* Sub-filtros (Novos/Online/Seguindo/Seguidores) */
.light-mode .feed-subtabs-mobile { background-color: var(--bg-main) !important; border-top-color: var(--border-color) !important; }
.light-mode .sub-tab-pill { background-color: #e8ecef !important; color: #536471 !important; border-color: #d1d9dd !important; box-shadow: none !important; }
.light-mode .sub-tab-pill::before { background-color: #b0bec5 !important; }
.light-mode .sub-tab-pill.active { background-color: #e8f5e9 !important; color: #2e7d32 !important; border-color: #66bb6a !important; box-shadow: 0 0 8px rgba(102,187,106,.25) !important; }
.light-mode .sub-tab-pill.active::before { background-color: #66bb6a !important; box-shadow: none !important; }

/* Sidebar mobile (quando aberta) */
.light-mode .sidebar-left.active { background-color: var(--bg-main) !important; }

/* Desktop-mode-mobile em light-mode */
body.light-mode.desktop-mode-mobile,
html.light-mode body.desktop-mode-mobile { background: #e8ecef !important; }