:root {
    --youtube-red: #ff0000;
    --youtube-red-dark: #cc0000;
    --youtube-dark: #282828;
    --youtube-darker: #181818;

    --text-primary: #0f0f0f;
    --text-secondary: #606060;
    --text-muted: #777777;

    --border-color: #e5e5e5;
    --bg-page: #f6f7fb;
    --bg-card: #ffffff;
    --bg-hover: #f1f3f5;
    --bg-soft: #f8fafc;

    --header-bg: #ffffff;
    --input-bg: #fbfbfc;
    --modal-bg: #ffffff;

    --success: #065fd4;
    --warning: #ff9800;

    --shadow-soft: 0 3px 12px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 12px 34px rgba(15, 23, 42, 0.08);

    --sidebar-width: 280px;
}

/* ==========================================================================
   TEMA ESCURO
   Ativado quando o body receber class="theme-dark"
   ========================================================================== */

body.theme-dark {
    --text-primary: #f5f7fb;
    --text-secondary: #a7adba;
    --text-muted: #8a91a1;

    --border-color: #2a2f3a;
    --bg-page: #0f1117;
    --bg-card: #171a23;
    --bg-hover: #222631;
    --bg-soft: #1d212b;

    --header-bg: #171a23;
    --input-bg: #11141b;
    --modal-bg: #171a23;

    --shadow-soft: 0 3px 14px rgba(0, 0, 0, 0.28);
    --shadow-card: 0 14px 38px rgba(0, 0, 0, 0.34);
}

/* Compatibilidade caso futuramente usemos data-theme */
html[data-theme="dark"] {
    --text-primary: #f5f7fb;
    --text-secondary: #a7adba;
    --text-muted: #8a91a1;

    --border-color: #2a2f3a;
    --bg-page: #0f1117;
    --bg-card: #171a23;
    --bg-hover: #222631;
    --bg-soft: #1d212b;

    --header-bg: #171a23;
    --input-bg: #11141b;
    --modal-bg: #171a23;

    --shadow-soft: 0 3px 14px rgba(0, 0, 0, 0.28);
    --shadow-card: 0 14px 38px rgba(0, 0, 0, 0.34);
}