/**
 * DESIGN SYSTEM TOKENS
 * Paleta principal: #00040D · #0F1626 · #222F40 · #797F8C · #E9ECF2
 * Paleta secundária (Consultoria): ver comentário --segment-consult-* em :root
 */

:root {
    /* Referência (paleta base) */
    --palette-ink: #00040d;
    --palette-navy: #0f1626;
    --palette-slate: #222f40;
    --palette-muted: #797f8c;
    --palette-mist: #e9ecf2;

    /*
     * Paleta secundária — segmentação visual Consultoria
     * Referência neutra: #F2F2F2 · #8C8C8C · #404040 · #262626 · #0D0D0D
     * Pólo claro: --palette-mist (#E9ECF2), o mesmo “quase branco” usado em
     * fundos claros (ex.: hub / About Us na home: bg-white/95 sobre mist).
     * Os tons escuros descem até o extremo --segment-consult-ink; em secções
     * claras o sistema converge visualmente para --segment-consult-surface.
     */
    --segment-consult-surface: var(--palette-mist);
    --segment-consult-muted: #8c8c8c;
    --segment-consult-charcoal: #404040;
    --segment-consult-deep: #262626;
    --segment-consult-ink: #0d0d0d;
    --segment-consult-grid-line: rgba(140, 140, 140, 0.22);
    /* Opcional: extremos escuros → centro claro (hero, faixas, SVGs) */
    --segment-consult-converge-gradient: linear-gradient(
        90deg,
        var(--segment-consult-ink) 0%,
        var(--segment-consult-deep) 16%,
        var(--segment-consult-charcoal) 32%,
        var(--segment-consult-surface) 50%,
        var(--segment-consult-charcoal) 68%,
        var(--segment-consult-deep) 84%,
        var(--segment-consult-ink) 100%
    );

    /* Marca / interação (derivados da paleta) */
    --brand-primary: var(--palette-slate);
    --brand-primary-soft: rgba(233, 236, 242, 0.14);
    --brand-primary-hover: #343e52;
    --brand-surface: var(--palette-mist);

    /* UI por função */
    --bg-primary: var(--palette-navy);
    --bg-primary-deep: var(--palette-ink);
    --bg-primary-95: rgba(15, 22, 38, 0.95);
    --bg-secondary: var(--palette-mist);
    --bg-overlay-soft: rgba(233, 236, 242, 0.12);
    --text-primary: var(--palette-ink);
    --text-secondary: var(--palette-muted);
    --text-muted-2: var(--palette-slate);
    --text-inverse: var(--palette-ink);
    --text-on-dark: var(--palette-mist);
    /* Destaques em fundos escuros (ex.: hubs, newsletter no hero escuro) */
    --text-accent: var(--palette-mist);
    --line-decorative: var(--palette-muted);
    --icon-primary: var(--palette-muted);
    --line-soft: rgba(121, 127, 140, 0.45);

    --color-success: #22c55e;
    --color-error: #ef4444;
    --state-hover-opacity: 0.8;
    --state-pressed-opacity: 0.9;

    --font-family-main: "Gotham", "Gotham Book", Arial, sans-serif;
    --font-family-display: "Gotham", "Gotham Medium", Arial, sans-serif;
    --letter-spacing-premium: 0.02em;
    --text-h1: clamp(2rem, 3.8vw, 3.5rem);
    --text-body: clamp(0.95rem, 1.2vw, 1.125rem);
    --line-height-base: 1.6;

    --gap-standard: 24px;
    --padding-element: 16px;
    --margin-section: 64px;

    --radius-button: 2px;
    --stroke-thin: 1px;
    --icon-weight: 16px;

    --duration-fast: 300ms;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --anim-type: dissolve;

    --scrollbar-track: transparent;
    --scrollbar-thumb: var(--palette-muted);
    --scrollbar-thumb-hover: var(--palette-slate);
    --scroll-progress-to: rgba(233, 236, 242, 0.9);
}


/* Base */

html,
body {
    color: var(--text-primary);
    font-family: var(--font-family-main);
}

.font-sans {
    font-family: var(--font-family-main) !important;
}


/* =========================
   MAPEAMENTO GLOBAL (LEGACY/TW CLASSES)
   ========================= */

.bg-gray-200 {
    background-color: var(--bg-secondary) !important;
}

.bg-dark-600 {
    background-color: var(--bg-primary) !important;
}

.text-dark-600 {
    color: var(--text-primary) !important;
}

.text-white {
    color: var(--text-on-dark) !important;
}

.text-gray-100 {
    color: var(--palette-mist) !important;
}

.text-gray-400 {
    color: var(--text-secondary) !important;
}

.text-gray-500 {
    color: var(--text-muted-2) !important;
}

.text-black {
    color: var(--text-inverse) !important;
}

.text-yellow-700 {
    color: var(--text-accent) !important;
}

.bg-yellow-700 {
    background-color: var(--brand-primary) !important;
}

.bg-yellow-600 {
    background-color: var(--brand-primary-hover) !important;
}

.focus\:border-yellow-700:focus {
    border-color: var(--brand-primary) !important;
}

.border-gray-700\/50 {
    border-color: var(--line-soft) !important;
}

.bg-white\/10 {
    background-color: var(--bg-overlay-soft) !important;
}

.hover\:text-yellow-500:hover {
    color: var(--palette-muted) !important;
}

.hover\:bg-yellow-600:hover {
    background-color: var(--brand-primary-hover) !important;
}

.hover\:text-white:hover {
    color: var(--text-on-dark) !important;
}

.text-yellow-600 {
    color: var(--palette-muted) !important;
}


/* SVGs temáticos compartilhados */

.areas-triangles stop,
.footer-triangles stop {
    stop-color: var(--line-decorative);
}