/*
|--------------------------------------------------------------------------
| Design System Backoffice COMEPI — tokens primitivos
|--------------------------------------------------------------------------
|
| Escalas de cor e valores brutos. Componentes NÃO usam estes tokens
| diretamente: usam os semânticos (semantic.css), que apontam para cá.
| Trocar uma escala aqui muda o sistema inteiro de forma controlada.
|
| Rosa COMEPI: vem do logo (flor e logotipo, #EE3583). Esse rosa exato
| não tem contraste para texto branco pequeno, então ações e links usam
| o "framboesa" (mesma matiz, mais fechado): é o tom próprio do Backoffice.
| Grafite: neutro frio, para a marca aparecer pouco e com peso.
| Contrastes conferidos (WCAG AA): ver /design-system, seção Cores.
|
*/

:root {
    /* Rosa COMEPI: 500 é o rosa da flor (logo). 600 em diante é o
       "framboesa", o tom do Backoffice para ação e texto (contraste AA). */
    --ds-pink-50: #FDF2F6;
    --ds-pink-100: #FAE0EB;
    --ds-pink-200: #F5BCD4;
    --ds-pink-300: #EE8CB5;
    --ds-pink-400: #E65B95;
    --ds-pink-500: #EE3583;
    --ds-pink-600: #BF1D60;
    --ds-pink-700: #A01850;
    --ds-pink-800: #851443;
    --ds-pink-900: #620F31;
    --ds-pink-950: #3E091F;

    /* Grafite (neutros) */
    --ds-graphite-0: #FFFFFF;
    --ds-graphite-25: #FAFAFC;
    --ds-graphite-50: #F5F5F8;
    --ds-graphite-100: #EDEDF2;
    --ds-graphite-150: #E4E3EA;
    --ds-graphite-200: #D9D8E1;
    --ds-graphite-300: #BDBBC9;
    --ds-graphite-400: #8F8DA0;
    --ds-graphite-500: #6B6980;
    --ds-graphite-600: #5A586B;
    --ds-graphite-700: #434154;
    --ds-graphite-800: #2D2B3B;
    --ds-graphite-900: #1D1B29;
    --ds-graphite-950: #17161F;
    --ds-graphite-975: #141319;
    --ds-graphite-1000: #0F0E14;

    /* Verde (sucesso) */
    --ds-green-50: #E9F5EE;
    --ds-green-200: #BCDFCB;
    --ds-green-500: #2A8A5A;
    --ds-green-600: #1D7449;
    --ds-green-700: #1B6B45;

    /* Âmbar (atenção) */
    --ds-amber-50: #FFF4DD;
    --ds-amber-200: #F1D49B;
    --ds-amber-500: #C77D0A;
    --ds-amber-700: #7F4D00;

    /* Vermelho (erro, destrutivo) — puxado para o laranja para nunca
       ser confundido com o rosa da marca */
    --ds-red-50: #FDECE8;
    --ds-red-200: #F3C0B4;
    --ds-red-600: #B8321C;
    --ds-red-700: #A92C16;
    --ds-red-800: #8E2412;

    /* Azul (informação) */
    --ds-blue-50: #E9F0FA;
    --ds-blue-200: #BFD3EE;
    --ds-blue-600: #2464AC;
    --ds-blue-700: #1C5496;

    /* Tipografia */
    --ds-font-family-sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    --ds-font-weight-regular: 400;
    --ds-font-weight-medium: 500;
    --ds-font-weight-semibold: 600;

    /* Espaçamento: grade de 4 px (space-N = N × 4 px) */
    --ds-space-0: 0;
    --ds-space-0-5: 2px;
    --ds-space-1: 4px;
    --ds-space-1-5: 6px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;
    --ds-space-16: 64px;

    /* Raio */
    --ds-radius-sm: 4px;
    --ds-radius-md: 6px;
    --ds-radius-lg: 8px;
    --ds-radius-xl: 12px;
    --ds-radius-full: 999px;

    /* Borda */
    --ds-border-width: 1px;
    --ds-border-width-strong: 2px;

    /* Movimento */
    --ds-duration-fast: 100ms;
    --ds-duration-normal: 160ms;
    --ds-duration-slow: 240ms;
    --ds-ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ds-ease-exit: cubic-bezier(.4, 0, 1, 1);
}