:root {
    --color-bg: #150e0b;
    --color-bg-alt: #1f1310;
    --color-surface: #26160f;
    --color-surface-alt: #2f1c13;
    --color-border: #3d2417;

    --color-fire-red: #d4271e;
    --color-fire-red-dark: #a01912;
    --color-fire-orange: #f2740c;
    --color-fire-orange-light: #ff9a3d;
    --color-gold: #f5b942;
    --color-gold-dark: #c8931f;

    --color-text: #f5ece4;
    --color-text-muted: #c9b6a8;
    --color-text-dim: #96826f;

    --color-success: #3fb56d;
    --color-danger: #e0483e;
    --color-info: #3d9bd6;

    --gradient-fire: linear-gradient(135deg, var(--color-fire-red) 0%, var(--color-fire-orange) 55%, var(--color-gold) 100%);
    --gradient-fire-vertical: linear-gradient(180deg, var(--color-fire-orange) 0%, var(--color-fire-red) 100%);

    --font-display: 'Poppins', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-fire: 0 8px 24px rgba(212, 39, 30, 0.35);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
}

/* Reseta a aparência nativa dos botões: sem isso, alguns navegadores renderizam
   o texto do botão em preto/cor de sistema em vez de herdar a cor do tema,
   mesmo com background e cor customizados — resultando em baixo contraste. */
button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* O atributo "hidden" nativo tem baixa prioridade e é facilmente sobrescrito
   por qualquer componente que defina seu próprio "display" (ex.: display: flex
   num card). Isso faz elementos escondidos via JS (badges, o botão do carrinho,
   avisos) continuarem aparecendo. Forçamos "hidden" a sempre vencer. */
[hidden] {
    display: none !important;
}