/* ==========================================================================
   Portal de Vagas AGEX — Tokens de design
   --------------------------------------------------------------------------
   Valores alinhados à Central de Tickets AGEX, para que os dois sistemas
   internos sejam lidos como o mesmo produto.

   Nenhum componente escreve cor, raio, sombra, espaçamento ou fonte fora
   destes tokens. Ajustar a identidade é editar este arquivo.
   ========================================================================== */

:root {
    /* --- Marca ------------------------------------------------------------
       Laranja da logo AGEX: ação principal, destaques e alertas de atenção.
       Verde-petróleo: menu lateral e superfícies institucionais.
       Teal: destaque secundário — estado ativo, gráficos, ações de apoio.

       Os tons de verde e teal são os MESMOS valores do app.css da Central de
       Tickets, copiados de lá e não estimados por imagem. É o que garante que
       um sistema aberto ao lado do outro pareça o mesmo produto.          */
    --brand-orange:        #F96C0C;
    --brand-orange-600:    #E15E04;
    --brand-orange-700:    #BE4E03;
    --brand-orange-200:    #FBCFAE;
    --brand-orange-100:    #FDE5D2;
    --brand-orange-050:    #FEF4EC;

    --brand-dark:          #0C3338;   /* menu lateral   (sidebar-bg)   */
    --brand-dark-700:      #0E3D43;   /* hover do menu  (sidebar-bg-2) */
    --brand-dark-600:      #134B52;   /* item ativo     (sidebar-active) */
    --brand-dark-500:      #1A6169;
    --brand-dark-text:     #B8D4D8;   /* texto sobre o menu (sidebar-text) */

    --brand-teal:          #0E7490;   /* primary da Central de Tickets */
    --brand-teal-600:      #0A5C73;   /* primary-hover                 */
    --brand-teal-700:      #084A5C;
    --brand-teal-300:      #14B8A6;   /* barra do item ativo (teal)    */
    --brand-teal-100:      #CCECEC;
    --brand-teal-050:      #ECF8F7;

    /* Roxo usado nos gráficos por responsável, como na Central de Tickets */
    --brand-purple:        #7C3AED;
    --brand-purple-100:    #EDE4FE;

    /* --- Neutros ---------------------------------------------------------- */
    --gray-000:            #FFFFFF;
    --gray-025:            #FAFBFC;
    --gray-050:            #F4F6F8;
    --gray-100:            #ECEFF2;
    --gray-200:            #E1E6EA;
    --gray-300:            #C9D1D8;
    --gray-400:            #97A3AC;
    --gray-500:            #6A7681;
    --gray-600:            #4C5762;
    --gray-700:            #37424C;
    --gray-800:            #232C34;
    --gray-900:            #141C22;

    /* --- Semânticos ------------------------------------------------------- */
    --success:             #16A34A;
    --success-bg:          #ECFDF3;
    --success-border:      #A7E5BF;
    --warning:             #E8940C;
    --warning-bg:          #FFF8EB;
    --warning-border:      #F5D28A;
    --danger:              #DC2626;
    --danger-bg:           #FEF2F2;
    --danger-border:       #F5B5B5;
    --info:                #0E7490;
    --info-bg:             #ECF8F7;
    --info-border:         #9FD5D5;

    /* --- Papéis ----------------------------------------------------------- */
    --bg-app:              var(--gray-050);
    --bg-surface:          var(--gray-000);
    --bg-surface-alt:      var(--gray-025);
    --bg-muted:            var(--gray-100);
    --bg-sidebar:          var(--brand-dark);

    --text-strong:         var(--gray-900);
    --text-default:        var(--gray-700);
    --text-muted:          var(--gray-500);
    --text-subtle:         var(--gray-400);
    --text-on-dark:        var(--brand-dark-text);
    --text-on-brand:       #FFFFFF;

    --border:              var(--gray-200);
    --border-strong:       var(--gray-300);
    --border-subtle:       var(--gray-100);

    --accent:              var(--brand-orange);
    --accent-hover:        var(--brand-orange-600);
    --accent-active:       var(--brand-orange-700);
    --accent-soft:         var(--brand-orange-100);

    --accent-2:            var(--brand-teal);
    --accent-2-hover:      var(--brand-teal-600);
    --accent-2-soft:       var(--brand-teal-100);

    /* --- Tipografia -------------------------------------------------------
       Duas vozes, uma para cada público.

       Painel (interno): Montserrat, com Unbounded em títulos estratégicos.
       Fonte de trabalho — neutra, compacta, boa em tabela densa.

       Portal (candidato): Alegreya Sans no texto, Montserrat nos títulos.
       O corpo em Alegreya Sans deixa a leitura mais macia que a do painel; os
       títulos em Montserrat bold dão o peso geométrico que a página de vagas
       pede. A serifada Alegreya continua carregada e disponível, mas fora do
       portal — em título grande ela puxava para "revista", não para "produto".

       Os .woff2 são servidos pelo próprio domínio (public/assets/fonts/).
       Se algum faltar, a pilha cai em fontes do sistema sem quebrar layout. */
    --font-sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Unbounded", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --font-portal:         "Alegreya Sans", "Optima", "Segoe UI", system-ui, sans-serif;
    --font-portal-display: "Montserrat", "Alegreya Sans", -apple-system, "Segoe UI", sans-serif;

    --fs-2xs:   0.6875rem;  /* 11px */
    --fs-xs:    0.75rem;    /* 12px */
    --fs-sm:    0.8125rem;  /* 13px */
    --fs-base:  0.875rem;   /* 14px — base da interface */
    --fs-md:    0.9375rem;  /* 15px */
    --fs-lg:    1.0625rem;  /* 17px */
    --fs-xl:    1.25rem;    /* 20px */
    --fs-2xl:   1.5rem;     /* 24px */
    --fs-3xl:   1.875rem;   /* 30px */
    --fs-4xl:   2.25rem;    /* 36px */

    --fw-light:     300;
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    --lh-tight:   1.25;
    --lh-snug:    1.4;
    --lh-normal:  1.6;
    --lh-relaxed: 1.75;

    /* --- Espaçamento ------------------------------------------------------ */
    --sp-1:   0.25rem;
    --sp-2:   0.5rem;
    --sp-3:   0.75rem;
    --sp-4:   1rem;
    --sp-5:   1.25rem;
    --sp-6:   1.5rem;
    --sp-8:   2rem;
    --sp-10:  2.5rem;
    --sp-12:  3rem;
    --sp-16:  4rem;

    /* --- Formas ----------------------------------------------------------- */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   10px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 999px;

    /* --- Sombras (discretas) ---------------------------------------------- */
    --shadow-xs:  0 1px 2px rgba(12, 51, 56, 0.05);
    --shadow-sm:  0 1px 3px rgba(12, 51, 56, 0.07), 0 1px 2px rgba(12, 51, 56, 0.04);
    --shadow-md:  0 4px 12px rgba(12, 51, 56, 0.08), 0 1px 3px rgba(12, 51, 56, 0.04);
    --shadow-lg:  0 12px 32px rgba(12, 51, 56, 0.12), 0 4px 8px rgba(12, 51, 56, 0.05);
    --shadow-xl:  0 24px 56px rgba(12, 51, 56, 0.18);

    --ring-accent: 0 0 0 3px rgba(249, 108, 12, 0.22);
    --ring-focus:  0 0 0 3px rgba(14, 116, 144, 0.28);
    --ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.22);

    /* --- Layout ----------------------------------------------------------- */
    --sidebar-w:        268px;
    --topbar-h:         64px;
    --content-max:      1600px;
    --content-pad:      var(--sp-6);

    /* --- Movimento -------------------------------------------------------- */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:    120ms;
    --dur-base:    200ms;
    --dur-slow:    320ms;

    --z-dropdown:  100;
    --z-sticky:    200;
    --z-drawer:    900;
    --z-modal:     1000;
    --z-toast:     1100;
}

/* Respeita quem pediu menos movimento no sistema operacional */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}