/* ==========================================================================
   Lanchao Bom D+ — Design System
   Paleta extraída da logo (hambúrguer + acentos de pizza)
   ========================================================================== */

:root {
    /* Cores principais */
    --color-bg: #0D0D0D;              /* preto de fundo (logo) */
    --color-bg-alt: #1A1A1A;          /* preto levemente elevado (cards, seções) */

    --color-primary: #F5A623;         /* laranja do pão (topo do hambúrguer) */
    --color-primary-dark: #D98812;    /* laranja mais escuro (hover/active) */
    --color-primary-light: #FFC15C;   /* laranja claro (destaques suaves) */

    --color-secondary: #E8483A;       /* vermelho (squiggle / pizza) */
    --color-secondary-dark: #C13327;

    --color-accent: #4CAF50;          /* verde (pizza / bandeira italiana) */
    --color-accent-dark: #388E3C;

    --color-white: #FFFFFF;
    --color-text: #FFFFFF;
    --color-text-muted: #B3B3B3;
    --color-text-on-light: #1A1A1A;

    --color-border: #2E2E2E;
    --color-success: #4CAF50;
    --color-warning: #F5A623;
    --color-danger: #E8483A;

    /* Tipografia */
    --font-heading: 'Baloo 2', cursive, sans-serif;
    --font-body: 'Inter', sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.75rem;

    /* Espaçamento */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    /* Bordas e sombras */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Reset básico ---------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-light);
}

/* Botões ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-base);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-on-light);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-dark);
}

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.btn-accent:hover {
    background-color: var(--color-accent-dark);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-on-light);
}

/* Cards -------------------------------------------------------------------- */
.card {
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm); 
}

/* Badges / status ----------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success { background-color: var(--color-success); color: var(--color-white); }
.badge-warning { background-color: var(--color-warning); color: var(--color-text-on-light); }
.badge-danger  { background-color: var(--color-danger); color: var(--color-white); }

/* Utilitários ---------------------------------------------------------------- */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }