/**
 * design-system.css — Tokens do design system Future-se aplicados sobre o Bootstrap 5.
 * Sobrescreve as CSS variables do Bootstrap (--bs-*), para herdar automaticamente em
 * .btn, .bg-*, .text-*, .border, .rounded etc., e define classes utilitárias para o
 * que o Bootstrap não cobre nativamente (tipografia editorial, cores extras, botões
 * do design system). Ver DESIGN.md na raiz do projeto para a fonte de verdade dos
 * valores (cores, tipografia, espaçamento).
 *
 * Carregar DEPOIS do bootstrap.min.css e ANTES de style.css.
 */

:root {
    /* Cores — DESIGN.md */
    --fs-surface-base: #F5F3EF;
    --fs-surface-pure: #FFFFFF;
    --fs-surface-dark: #222222;
    --fs-text-primary: #222222;
    --fs-text-muted: #686663;
    --fs-text-on-dark: #FFFFFF;
    --fs-accent-green: #93C04E;
    --fs-accent-green-hover: #82ad42;
    --fs-border-subtle: rgba(34, 34, 34, 0.12);
    --fs-border-dark-subtle: rgba(255, 255, 255, 0.14);

    /* Sobrescreve variáveis do Bootstrap */
    --bs-body-bg: var(--fs-surface-base);
    --bs-body-color: var(--fs-text-primary);
    --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
    --bs-link-color: var(--fs-text-primary);
    --bs-link-hover-color: var(--fs-accent-green);
    --bs-border-color: var(--fs-border-subtle);
    --bs-primary: var(--fs-accent-green);
    --bs-primary-rgb: 147, 192, 78;
    --bs-dark: var(--fs-surface-dark);
    --bs-border-radius-sm: 0.5rem;   /* rounded-sm — 8px */
    --bs-border-radius: 0.75rem;     /* rounded-md — 12px */
    --bs-border-radius-lg: 1rem;     /* rounded-lg — 16px */
    --bs-border-radius-xl: 1.5rem;
}

/* O .container do Bootstrap já fecha em 1320px no breakpoint xxl — mesmo
   max-width institucional do DESIGN.md, então nenhuma sobrescrita é necessária
   para os containers; use .container normalmente em todas as páginas. */

/* Backgrounds do design system */
.bg-surface-base { background-color: var(--fs-surface-base) !important; }
.bg-surface-pure { background-color: var(--fs-surface-pure) !important; }
.bg-surface-dark { background-color: var(--fs-surface-dark) !important; }
.bg-accent-green { background-color: var(--fs-accent-green) !important; }
.bg-surface-container-highest { background-color: #e4e2de !important; }
.bg-surface-container { background-color: #f0eeea !important; }
.bg-surface-dark-elevated { background-color: #30312e !important; }
.bg-surface-bright { background-color: #fbf9f5 !important; }

/* Bordas do design system */
.border-fs-subtle { border-color: var(--fs-border-subtle) !important; }
.border-fs-dark-subtle { border-color: var(--fs-border-dark-subtle) !important; }

/* Texto do design system */
.text-ink-primary { color: var(--fs-text-primary) !important; }
.text-ink-muted { color: var(--fs-text-muted) !important; }
.text-ink-on-dark { color: var(--fs-text-on-dark) !important; }
.text-accent-green { color: var(--fs-accent-green) !important; }
.text-ink-secondary { color: #456800 !important; } /* verde-escuro para eyebrows sobre fundo claro */

/* Botões — DESIGN.md > Components > Buttons */
.btn-fs-primary {
    background-color: var(--fs-accent-green);
    color: var(--fs-text-primary);
    font-weight: 600;
    border-radius: var(--bs-border-radius);
    padding: 0.875rem 1.75rem;
    border: none;
    transition: background-color .2s ease;
}
.btn-fs-primary:hover,
.btn-fs-primary:focus {
    background-color: var(--fs-accent-green-hover);
    color: var(--fs-text-primary);
}

.btn-fs-secondary {
    background-color: transparent;
    border: 1.5px solid var(--fs-text-primary);
    color: var(--fs-text-primary);
    font-weight: 600;
    border-radius: var(--bs-border-radius);
    padding: 0.875rem 1.75rem;
    transition: all .2s ease;
}
.btn-fs-secondary:hover,
.btn-fs-secondary:focus {
    background-color: var(--fs-text-primary);
    color: #fff;
}

.btn-fs-inverted {
    background-color: transparent;
    border: 1.5px solid #fff;
    color: #fff;
    font-weight: 600;
    border-radius: var(--bs-border-radius);
    padding: 0.875rem 1.75rem;
    transition: all .2s ease;
}
.btn-fs-inverted:hover,
.btn-fs-inverted:focus {
    background-color: var(--fs-accent-green);
    border-color: var(--fs-accent-green);
    color: var(--fs-text-primary);
}

/* Tipografia editorial — mobile-first; breakpoint lg (992px) assume a escala desktop */
.fs-display-xl { font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
.fs-headline-lg { font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.fs-headline-md { font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.fs-headline-sm { font-size: 24px; font-weight: 600; line-height: 1.3; }
.fs-body-xl { font-size: 21px; font-weight: 400; line-height: 1.5; }
.fs-body-lg { font-size: 18px; font-weight: 400; line-height: 1.6; }
.fs-body-md { font-size: 16px; font-weight: 400; line-height: 1.6; }
.fs-label-lg { font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; }
.fs-label-sm { font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.05em; }
.fs-metric-display { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }

@media (min-width: 992px) {
    .fs-display-xl { font-size: 72px; line-height: 1.08; letter-spacing: -0.03em; }
    .fs-headline-lg { font-size: 48px; line-height: 1.15; letter-spacing: -0.02em; }
    .fs-headline-md { font-size: 32px; }
    .fs-metric-display { font-size: 64px; letter-spacing: -0.03em; }
}

/* ==========================================================================
   Classes de limpeza — substituem os padrões de `style=""` mais repetidos
   no projeto (badges, divisores, ícones, texto sobre fundo escuro).
   ========================================================================== */

/* Bolinhas decorativas (badges, listas, marcadores) */
.dot-sm { width: 6px; height: 6px; }
.dot-md { width: 8px; height: 8px; }
.dot-lg { width: 10px; height: 10px; }

/* Barra divisória abaixo de títulos */
.divider-bar { width: 3rem; height: 4px; }
.divider-bar-sm { width: 2rem; height: 4px; }

/* Rastreamento de letras dos rótulos em uppercase (badges, eyebrows) —
   um único valor para todo o projeto, no lugar de 0.04/0.06/0.08em soltos */
.ls-label { letter-spacing: 0.04em; }

/* Texto secundário sobre fundo escuro (parágrafos dentro de cards/seções
   bg-surface-dark) — substitui color:#dbdad6 / #e4e2de repetidos */
.text-ink-on-dark-muted { color: #dbdad6; }

/* Largura máxima de bloco de texto (medida de leitura) */
.measure-sm { max-width: 36rem; }
.measure-md { max-width: 42rem; }
.measure-lg { max-width: 48rem; }

/* Tamanho do ícone Material Symbols (font-size inline repetido) */
.icon-14 { font-size: 14px; }
.icon-16 { font-size: 16px; }
.icon-18 { font-size: 18px; }
.icon-20 { font-size: 20px; }
.icon-24 { font-size: 24px; }
.icon-28 { font-size: 28px; }
.icon-36 { font-size: 36px; }
.icon-40 { font-size: 40px; }
.icon-44 { font-size: 44px; }

/* Espaçamento vertical de seção em ritmo de 8px (além da escala 0–5 do Bootstrap) */
.py-fs-xl { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-fs-lg { padding-top: 3rem; padding-bottom: 3rem; }
.py-5 { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 992px) {
    .py-fs-xl { padding-top: 4rem; padding-bottom: 4rem; }
    .py-fs-lg { padding-top: 5rem; padding-bottom: 5rem; }
    .py-5 { padding-top: 6rem; padding-bottom: 6rem; }
}