/*
 * DESIGN TOKENS — identidade visual do marketplace de biomassa.
 *
 * Bootstrap 5 é a base estrutural; a identidade vem daqui. Os componentes
 * (app.css) usam apenas estes tokens — nunca cores literais — para que a
 * marca possa ser ajustada num único lugar.
 *
 * Paleta: verde-cana (primária), palha/bagaço (destaque), terra (apoio) e
 * neutros quentes.
 */
:root {
    /* Marca */
    --bg-verde-900: #123a27;
    --bg-verde-700: #1d5c3d;
    --bg-verde-600: #25714b;
    --bg-verde-500: #2f8a5c;
    --bg-verde-100: #e3f1e8;
    --bg-verde-50: #f1f8f3;

    --bg-palha-600: #a8841a;
    --bg-palha-500: #c9a227;
    --bg-palha-100: #f7efd3;

    --bg-terra-600: #7a5230;
    --bg-terra-100: #f1e6dc;

    /* Neutros quentes */
    --bg-neutro-950: #171a17;
    --bg-neutro-800: #2b302c;
    --bg-neutro-600: #5b635d;
    --bg-neutro-400: #9aa19b;
    --bg-neutro-200: #dcdfd8;
    --bg-neutro-100: #ebece6;
    --bg-neutro-50: #f6f6f2;

    /* Semânticas */
    --cor-fundo: var(--bg-neutro-50);
    --cor-superficie: #ffffff;
    --cor-superficie-alt: #fafaf7;
    --cor-borda: var(--bg-neutro-200);
    --cor-texto: var(--bg-neutro-950);
    --cor-texto-suave: var(--bg-neutro-600);
    --cor-primaria: var(--bg-verde-600);
    --cor-primaria-hover: var(--bg-verde-700);
    --cor-primaria-suave: var(--bg-verde-100);
    --cor-destaque: var(--bg-palha-500);
    --cor-destaque-suave: var(--bg-palha-100);

    --cor-sucesso: #237a4b;
    --cor-sucesso-suave: #e2f3e9;
    --cor-aviso: #9a6700;
    --cor-aviso-suave: #fdf3d7;
    --cor-erro: #b42318;
    --cor-erro-suave: #fdecea;
    --cor-info: #1f5d8c;
    --cor-info-suave: #e6f0f8;

    /* Tipografia (fontes do sistema: sem dependência externa, CSP simples) */
    --fonte-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
    --texto-xs: .75rem;
    --texto-sm: .875rem;
    --texto-md: 1rem;
    --texto-lg: 1.125rem;
    --texto-xl: 1.5rem;
    --texto-2xl: 1.875rem;

    /* Espaçamento, raios, sombras */
    --espaco-1: .25rem;
    --espaco-2: .5rem;
    --espaco-3: .75rem;
    --espaco-4: 1rem;
    --espaco-5: 1.5rem;
    --espaco-6: 2rem;
    --raio-sm: .375rem;
    --raio-md: .625rem;
    --raio-lg: .875rem;
    --sombra-1: 0 1px 2px rgba(23, 26, 23, .06), 0 1px 3px rgba(23, 26, 23, .08);
    --sombra-2: 0 4px 12px rgba(23, 26, 23, .08);
    --foco: 0 0 0 .2rem rgba(47, 138, 92, .35);

    --largura-sidebar: 248px;
    --altura-topo: 60px;

    /* Integração com as variáveis do Bootstrap 5.3 */
    --bs-body-font-family: var(--fonte-base);
    --bs-body-bg: var(--cor-fundo);
    --bs-body-color: var(--cor-texto);
    --bs-border-color: var(--cor-borda);
    --bs-secondary-color: var(--cor-texto-suave);
    --bs-primary: var(--cor-primaria);
    --bs-primary-rgb: 37, 113, 75;
    --bs-link-color: var(--bg-verde-700);
    --bs-link-color-rgb: 29, 92, 61;
    --bs-link-hover-color: var(--bg-verde-900);
    --bs-link-hover-color-rgb: 18, 58, 39;
    --bs-border-radius: var(--raio-sm);
    --bs-border-radius-lg: var(--raio-md);
    --bs-focus-ring-color: rgba(47, 138, 92, .35);
    --bs-success-rgb: 35, 122, 75;
    --bs-danger-rgb: 180, 35, 24;
    --bs-warning-rgb: 201, 162, 39;
}