/**
 * Luneon - Tema oficial (preto + dourado)
 * Degradê no fundo, bordas e títulos dourados conforme identidade.
 */

:root {
    /* Fundo */
    --color-bg: #000000;
    --color-bg-soft: #0f0f0f;
    --color-bg-card: #1a1a1a;
    --color-border-strong: #2a2a2a;

    /* Degradê do fundo (mais claro no topo, mais escuro embaixo) */
    --gradient-bg: linear-gradient(180deg, #141414 0%, #0d0d0d 35%, #080808 70%, #000000 100%);

    /* Dourado (marca) */
    --color-gold: #c9a24a;
    --color-gold-light: #e0b95c;
    --color-gold-dark: #9c7a2f;
    --color-gold-bright: #f2d27a;
    --color-gold-border: rgba(201, 162, 74, 0.45);
    --color-gold-border-soft: rgba(201, 162, 74, 0.25);

    /* Texto */
    --color-text: #ffffff;
    --color-text-muted: #bfbfbf;

    /* Semântico */
    --bg-dark: var(--color-bg);
    --bg-soft: var(--color-bg-soft);
    --bg-card: var(--color-bg-card);
    /* Alias usado em modais/formulários (antes indefinido → fundo branco no Windows) */
    --bg: var(--color-bg-soft);
    --accent: var(--color-gold);
    --accent-light: var(--color-gold-light);
    --accent-dark: var(--color-gold-dark);
    --accent-bright: var(--color-gold-bright);
    --surface: var(--color-text);
    --text: var(--color-text);
    --text-muted: var(--color-text-muted);
    --border: var(--color-border-strong);
    --border-gold: 1px solid var(--color-gold-border);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --radius: 12px;
    --radius-sm: 8px;
    --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Controles nativos (select/date): lista do sistema no tema correto */
    color-scheme: dark;
}

:root[data-theme="light"] {
    --color-bg: #f8f5ee;
    --color-bg-soft: #ffffff;
    --color-bg-card: #fffdf8;
    --color-border-strong: #e9dcc0;
    --gradient-bg: linear-gradient(180deg, #faf7ef 0%, #f5efdf 40%, #efe6d1 100%);
    --color-gold: #af8530;
    --color-gold-light: #c29333;
    --color-gold-dark: #876720;
    --color-gold-bright: #d6a443;
    --color-gold-border: rgba(175, 133, 48, 0.4);
    --color-gold-border-soft: rgba(175, 133, 48, 0.22);
    --color-text: #1e1b15;
    --color-text-muted: #5b5448;
    --shadow: 0 4px 20px rgba(70, 52, 20, 0.12);
    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/* Selects: fundo + texto explícitos; option onde o UA respeita (evita lista branca + texto claro) */
select {
    background-color: var(--bg-card);
    color: var(--text);
}

select option,
select optgroup {
    background-color: var(--bg-card);
    color: var(--text);
}

body {
    margin: 0;
    font-family: var(--font);
    background: var(--gradient-bg);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
}

/* Botões */
.btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.btn-primary {
    background: var(--accent);
    color: #000000;
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--accent-light);
    color: #000000;
}

/* Cards: fundo escuro + borda dourada sutil */
.card,
.progress-card,
.chart-card {
    background: var(--bg-card);
    border: var(--border-gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.nav-link--active {
    color: var(--accent-bright) !important;
    font-weight: 600;
}