@import 'tailwindcss';
@config '../../tailwind.config.ts';
@plugin '@tailwindcss/forms';

/*
 * ============================================================================
 * DESIGN TOKENS — Site Institucional Omni
 * ============================================================================
 * Fonte da verdade: Design System do Figma (ver ~/Downloads/DESIGN-SYSTEM-OMNI.md).
 * Se houver divergência durante o dev, o FIGMA prevalece — voltar e atualizar
 * o token correspondente aqui.
 *
 * REGRA: nunca usar hex inline no JSX. Sempre estes tokens semânticos.
 * ============================================================================
 */
@theme {
    /* ------------------------------------------------------------------ */
    /* Cores — Primária (laranja Omni). "primary" == primary-main do DS.   */
    /* Obs.: as variações numeradas do DS são TINTS (mais claras que main). */
    /* ------------------------------------------------------------------ */
    --color-primary: #e95814; /* primary-main */
    --color-primary-100: #fef6f3;
    --color-primary-200: #fdebe3; /* = primary-20% */
    --color-primary-300: #f8cdb9;
    --color-primary-400: #f6bca1;
    --color-primary-600: #f29b72;
    --color-primary-700: #f08a5b;

    /* Cores — Neutras (escala de cinza do DS; substitui o gray do Tailwind) */
    --color-gray-100: #f7f7f8;
    --color-gray-200: #f0f0f2;
    --color-gray-300: #e1e2e4;
    --color-gray-400: #c2c5c9;
    --color-gray-500: #8c9099;
    --color-gray-600: #676d79;
    --color-gray-700: #3e4149;
    --color-gray-800: #151618;

    /* Cores — Secundária / apoio */
    --color-divider: #d9d9d9; /* divisória da navbar (cor crua do Figma) */
    --color-secondary-blue: #e5ebf5; /* fundo dos cards "Nossas Soluções" */
    --color-overlay-navy: #223658; /* overlay de hover dos cards Soluções (usar /10) */
    --color-footer-muted: #a4a7af; /* texto secundário do footer (fora da escala) */
    --color-hero-blue: #002fa7; /* base do gradiente azul do Hero */
    --color-hero-orange: #331e0e; /* base do gradiente laranja/marrom do Hero */
    --color-highlight-navy: #013188; /* faixa de destaque (Passo a passo) — em teste */
    /* MKT Colors (DS) — mini banners (209:5232). */
    --color-mkt-blue-300: #0035de;
    --color-mkt-orange: #f57821;
    --color-mkt-blue-100: #19bfff;
    /* Feedback / Success (DS) — usado no botão do WhatsApp (206:5107). */
    --color-success-100: #f3fdf7;
    --color-success-200: #cdf6dd;
    --color-success-300: #7ae7a5;
    --color-success-400: #17c55c;
    --color-success-500: #028e39;

    /* Cores oficiais dos ODS (Pacto Global da ONU) — usadas só nos cards de
       "Nossos compromissos" do Instituto Omni (cores de conteúdo, não do DS). */
    --color-ods-pobreza: #e5243b; /* ODS 1 */
    --color-ods-educacao: #c5192d; /* ODS 4 */
    --color-ods-genero: #ff3a21; /* ODS 5 */
    --color-ods-trabalho: #a21942; /* ODS 8 */
    --color-ods-desigualdades: #dd1367; /* ODS 10 */
    --color-ods-cidades: #fd9d24; /* ODS 11 */
    --color-ods-clima: #3f7e44; /* ODS 13 */
    --color-ods-paz: #00689d; /* ODS 16 */

    /* ------------------------------------------------------------------ */
    /* Tipografia — Averta CY (Regular/Bold).                              */
    /* Coloque os arquivos da fonte e habilite os @font-face abaixo.       */
    /* Enquanto não houver os arquivos, cai no fallback.                   */
    /* ------------------------------------------------------------------ */
    --font-sans: 'Averta CY', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Averta CY', 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* Escala tipográfica (tamanho + line-height) — nomes do DS */
    --text-heading-lg: 33px; /* Heading Large — hero desktop */
    --text-heading-lg--line-height: 1.2;
    --text-heading-md: 27px; /* Heading Medium — títulos de seção desktop / hero mobile */
    --text-heading-md--line-height: 1.2;
    --text-heading-sm: 23px; /* Heading Small — títulos de seção mobile */
    --text-heading-sm--line-height: 1.2;
    --text-subtitle: 19px; /* Subtitle */
    --text-subtitle--line-height: 1.4;
    --text-body: 16px; /* Body */
    --text-body--line-height: 1.4;
    --text-body-sm: 14px; /* Body 2 — secundário */
    --text-body-sm--line-height: 1.4;

    /* Breakpoint oficial do DS: Web (desktop/tablet landscape) a partir de 720px; */
    /* abaixo disso é a composição Mobile. Variante: `web:` */
    --breakpoint-web: 720px;

    /* Raios (DS) */
    --radius-sm: 4px; /* tags */
    --radius-md: 12px; /* botões, setas, tabs, inputs */
    --radius-lg: 16px; /* botão de menu mobile */
    --radius-xl: 20px; /* cards, navbar */
    --radius-2xl: 24px; /* mega menu */

    /* Sombras (DS) — valores validados contra as variáveis do Figma */
    --shadow-subtle: 0px 6px 200px -1px rgba(0, 0, 0, 0.1); /* Figma: blur 200, spread -1 */
    /* Equivalente CONTIDO da shadow-subtle p/ carrosséis mobile: a de 200px vira
       faixa cinza quando clipada pelo scroll; esta cabe no respiro do track. */
    --shadow-card-mobile: 0px 4px 20px rgba(0, 0, 0, 0.07);
    --shadow-navbar: 0px 6px 16px rgba(194, 197, 201, 0.42);
    --shadow-menu-button: 0px 6px 8px rgba(194, 197, 201, 0.42);
}

/* Fonte Averta CY — arquivos em public/fonts (WOFF2). */
@font-face {
    font-family: 'Averta CY';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/AvertaCY-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Averta CY';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/AvertaCY-Semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Averta CY';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/AvertaCY-Bold.woff2') format('woff2');
}

/* Base */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

a,
button:not(:disabled),
[role='button']:not([aria-disabled='true']) {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

body {
    @apply bg-white font-sans text-gray-700 antialiased;
    letter-spacing: -0.02em; /* tracking levemente negativo (DS: letter-spacing -2) */
}

/* Overlays do Header/Hero — valores exatos do Figma (design context). */
@layer components {
    /* Máscaras do Vídeo Institucional (legibilidade do texto) — CMS-selecionável
       (Figma node 1:3061/1:3062). Escurecem o canto inferior-esquerdo. */
    .video-mask-black {
        background-image: linear-gradient(
            239.59deg,
            rgba(44, 42, 42, 0) 45.25%,
            rgba(44, 42, 42, 0.35) 70.14%,
            rgba(44, 42, 42, 0.5) 84.04%
        );
    }
    .video-mask-orange {
        background-image: linear-gradient(
            259.9deg,
            rgba(51, 30, 14, 0) 40.99%,
            rgba(51, 30, 14, 0.56) 69.19%,
            rgba(51, 30, 14, 0.8) 91.4%
        );
    }
    .hero-overlay-black {
        background-image: linear-gradient(98deg, rgb(0, 0, 0) 3.79%, rgba(0, 0, 0, 0) 63.44%);
    }
    .hero-overlay-blue {
        background-image: linear-gradient(109deg, rgb(0, 47, 167) 14.57%, rgba(21, 37, 86, 0) 73.92%);
    }
    /* Máscara reforçada para banners internos (textos maiores): sólida ~32% à
       esquerda e some por volta de 70% — melhora a leitura sobre a imagem. */
    .banner-overlay-blue {
        background-image: linear-gradient(to right, rgb(0, 47, 167) 0%, rgb(0, 47, 167) 32%, rgba(21, 37, 86, 0) 70%);
    }
    .hero-overlay-orange {
        background-image: linear-gradient(109deg, rgb(51, 30, 14) 14.57%, rgba(51, 30, 14, 0) 73.92%);
    }
    /* Gradiente laranja do DS (Custom): F57821 → E54A26, diagonal (bottom-left→top-right).
       Usado em faixas/CTAs sólidos (ex.: mini banner "Simule agora"). */
    .cta-gradient-orange {
        background-image: linear-gradient(45deg, #e54a26 0%, #f57821 100%);
    }
    /* Gradiente azul do DS (Custom): 013188 → 2453A9, diagonal. */
    .cta-gradient-blue {
        background-image: linear-gradient(45deg, #013188 0%, #2453a9 100%);
    }
    /* Select do DS: remove a seta nativa (todos os navegadores) e desenha o
       chevron do DS (gray-500) via background-image. */
    .ds-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238C9099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 20px 20px;
    }
    .ds-select::-ms-expand {
        display: none;
    }
    /* Sombra opcional no título do hero (DS: usada quando a foto é clara/movimentada). */
    .hero-title-shadow {
        text-shadow: 0px 18px 24px rgba(41, 41, 41, 0.6);
    }
    /* Fundo da seção "Baixe o app" — escurece a SALA (marrom #331e0e): radial
       (spotlight na mulher, escurece as bordas/direita) + faixa escura no topo.
       Valores do Figma (node 1:799). A mulher recortada fica POR CIMA (iluminada). */
    .app-bg-overlay {
        background-image:
            linear-gradient(to top, rgba(51, 30, 14, 0) 77%, rgb(51, 30, 14) 90%),
            radial-gradient(
                72% 120% at 30% 64%,
                rgba(243, 188, 147, 0.02) 0%,
                rgba(147, 109, 80, 0.36) 19%,
                rgba(99, 70, 47, 0.53) 29%,
                rgba(75, 50, 31, 0.62) 34%,
                rgba(51, 30, 14, 0.7) 39%,
                rgba(51, 30, 14, 0.8) 55%,
                rgba(51, 30, 14, 0.9) 74%,
                rgba(51, 30, 14, 1) 89%
            );
    }
    /* Gradiente de topo da seção Notícias (Figma 1:771, 148px): cinza claro
       #f8f8f8 (amostrado do fill) desbotando pra transparente da MESMA cor —
       do topo da dobra até o começo do conteúdo (nota do DS). */
    .noticias-gradient {
        background-image: linear-gradient(180deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
    }
    /* Mapa dos Agentes: esquerda ancorada atrás da cabeça do homem (Figma
       x=159 / 560 = 28.4%). A direita SEMPRE encosta na borda direita da
       viewport — nunca deixa vão "antes da margem". Piso no tamanho do Figma
       (108.75% = 609px): NUNCA encolhe abaixo disso; em telas ≤~1576px fica
       nesse tamanho fixo e o leste é cortado na margem; em telas maiores estende
       até a margem (aparece inteiro). 401 = 560 (container) − 159 (offset). */
    .agentes-map {
        left: 28.4%;
        width: max(108.75%, calc(max(140px, (100vw - 1440px) / 2 + 140px) + 401px));
        max-width: none;
    }
    /* Track de carrossel: fica DENTRO do container do grid (esquerda alinhada
       ao conteúdo, sem 100vw) e sangra até a borda direita da viewport, pra o
       último card aparecer cortado (peek/scroll) como no Figma. */
    .carousel-bleed {
        margin-right: -1.75rem; /* mobile: cancela px-7 (28px) */
    }
    @media (min-width: 720px) {
        .carousel-bleed {
            /* cancela px-140 + margem de centralização (>1440) até a viewport */
            margin-right: calc(-1 * (140px + max((100vw - 1440px) / 2, 0px)));
        }
    }
}