/* ==========================================================================
   C4 Científica — Design Tokens

   FONTE ÚNICA DE VERDADE do design system. Este é o único arquivo do projeto
   que declara `:root`. Nenhum outro arquivo CSS define token, e nenhum
   componente escreve valor cru: cor, tipografia, espaçamento, raio, sombra,
   container, breakpoint e z-index saem daqui.

   Precisa de um valor novo? Crie o token aqui. Se você se pegou escrevendo um
   hex dentro de um componente, o token está faltando.

   Contraste: todos os pares de texto documentados abaixo foram medidos pela
   fórmula WCAG 2.1 e atendem AA (4.5:1 para texto, 3:1 para componente).
   Ao trocar um valor, meça de novo — não confie no olho.
   ========================================================================== */

:root {

    /* ======================================================================
       1. PALETAS BRUTAS
       Escalas de apoio. Não use direto na interface: use os tokens
       semânticos das seções seguintes, que dizem o PAPEL da cor.
       ====================================================================== */

    /* Marca — verde C4 */
    --brand-50:  #dce8db;
    --brand-100: #cbddc9;
    --brand-200: #b9d1b7;
    --brand-300: #97bb93;
    --brand-400: #74a46f;
    --brand-500: #518d4b;
    --brand-600: #41713c;
    --brand-700: #31552d;
    --brand-800: #20381e;
    --brand-900: #101c0f;

    /* Teal — sidebar e superfícies escuras */
    --teal-25:  #b4d9d7;
    --teal-50:  #a5cac8;
    --teal-100: #97bbb9;
    --teal-200: #7a9d9b;
    --teal-300: #5c7f7d;
    --teal-400: #3f615f;
    --teal-500: #224341;
    --teal-600: #1b3634;
    --teal-700: #142827;
    --teal-800: #0e1b1a;
    --teal-900: #0a1414;

    /* Neutros */
    --color-gray-50:  #fafafa;
    --color-gray-100: #f4f4f4;
    --color-gray-200: #e8e8e8;
    --color-gray-300: #d6d6d6;
    --color-gray-400: #a5a5a5;
    /* 450 é o cinza mais claro que ainda atinge 3:1 sobre branco (3.23:1).
       Existe para contorno de controle, exigência do WCAG 1.4.11. */
    --color-gray-450: #8f8f8f;
    --color-gray-500: #757575;
    --color-gray-600: #575757;
    --color-gray-700: #444;
    --color-gray-800: #2b2b2b;
    --color-gray-900: #1c1c1c;
    --color-gray-950: #020c07;
    --color-white:    #fff;


    /* ======================================================================
       2. MARCA
       ====================================================================== */

    /* 500 é a cor da identidade: ícone, borda, trilho, foco, indicador.
       Sobre branco ela dá 3.99:1 — passa como componente, NÃO como texto. */
    /* 400 é claro demais para texto ou preenchimento com rótulo. Serve só como
       ponta clara de gradiente, onde não carrega informação sozinho. */
    --color-primary-400: var(--brand-400);

    --color-primary-500: var(--brand-500);

    /* 600 e 700 são as versões que carregam texto branco com contraste AA.
       Toda superfície preenchida com rótulo usa 600; o hover aprofunda p/ 700. */
    --color-primary-600: var(--brand-600);   /* branco sobre ele: 5.75:1 */
    --color-primary-700: var(--brand-700);   /* branco sobre ele: 8.51:1 */

    --color-primary-surface: var(--brand-50);
    --color-primary:         var(--color-primary-500);

    --color-dark-500: var(--teal-500);
    --color-dark-700: var(--teal-700);


    /* ======================================================================
       3. TEXTO
       Todos medidos sobre --color-body (branco).
       ====================================================================== */

    --color-title:          var(--color-gray-800);   /* 14.16:1 */
    --color-text:           var(--color-gray-700);   /*  9.74:1 */
    --color-text-secondary: var(--color-gray-600);   /*  7.23:1 */

    /* Terciário é o piso: 4.61:1 sobre branco, 4.41:1 sobre --color-body-secondary.
       Use SOMENTE sobre branco. Em fundo cinza, suba para --color-text-secondary. */
    --color-text-tertiary:  var(--color-gray-500);

    --color-text-inverse:   var(--color-white);
    --color-text-link:      var(--color-primary-700); /* 8.51:1 */


    /* ======================================================================
       4. SUPERFÍCIE E BORDA
       ====================================================================== */

    --color-body:           var(--color-white);
    --color-body-secondary: var(--color-gray-50);    /* zebra, cabeçalho, rodapé */
    --color-body-tertiary:  var(--color-gray-100);   /* hover de item, trilho */

    /* Borda decorativa: separa blocos, não identifica controle. Sem alvo de contraste. */
    --color-border:       var(--color-gray-200);
    --color-border-soft:  var(--color-gray-100);
    --color-border-strong: var(--color-gray-300);

    /* Controles seguem a mesma borda Gray 200 das demais superfícies. */
    --color-border-control:     var(--color-gray-200);
    --color-border-interactive: var(--color-primary-500);


    /* ======================================================================
       5. FEEDBACK
       Quatro papéis por tom, e cada um tem um uso exclusivo:

         solid    preenchimento e traço — barra, ícone, toast, faixa de acento
         surface  fundo light do par de texto
         border   contorno sobre o surface
         text     ÚNICA cor válida para texto do tom, sobre surface ou branco

       O erro que este sistema corrigiu foi usar `solid` como cor de texto:
       #f6c034 sobre #fdf2d6 dava 1.51:1 — ilegível.
       ====================================================================== */

    --color-danger-solid:   #e3333b;
    --color-danger-surface: #fbe8e8;
    --color-danger-border:  #eecfcf;
    --color-danger-text:    #a23939;   /* 5.60:1 no surface · 6.60:1 no branco */
    --color-danger-strong:  #8a3030;   /* hover da superfície destrutiva */

    --color-warning-solid:   #f6c034;
    --color-warning-surface: #fff2d9;
    --color-warning-border:  #f0dcc0;
    --color-warning-text:    #91600e;  /* 4.88:1 no surface · 5.41:1 no branco */

    --color-success-solid:   #1fb77b;
    --color-success-surface: #e4f3e9;
    --color-success-border:  #cfe2d6;
    --color-success-text:    #216e47;  /* 5.40:1 no surface · 6.20:1 no branco */

    --color-info-solid:   #1277e0;
    --color-info-surface: #e8f1f8;
    --color-info-border:  #d4e0ee;
    --color-info-text:    #32658f;     /* 5.41:1 no surface · 6.19:1 no branco */

    --color-purple-solid:   #7a5cc4;
    --color-purple-surface: #f0ecf9;
    --color-purple-border:  #ddd4f0;
    --color-purple-text:    #5a44a0;   /* 6.53:1 no surface */

    --color-neutral-solid:   var(--color-gray-400);
    --color-neutral-surface: var(--color-gray-100);
    --color-neutral-border:  var(--color-gray-200);
    --color-neutral-text:    var(--color-gray-700);  /* 8.86:1 no surface */

    /* Avatar sem foto. A inicial precisa de fundo próprio: no cinza da borda ela
       se confundia com um campo vazio, e transparente sumia sobre o card branco
       e sobre o teal da sidebar. Um só par para os dois fundos. */
    --color-avatar-surface: var(--brand-50);
    --color-avatar-text:    var(--color-primary-700);   /* 6.73:1 no surface */


    /* ======================================================================
       6. SIDEBAR (fundo escuro)
       Medidos sobre --color-side-bg.
       ====================================================================== */

    --color-side-bg:          var(--teal-500);
    --color-side-border:      var(--teal-700);
    --color-side-title:       #9dbcb0;   /* 5.27:1 — era #86a99c (4.20:1) */
    --color-side-text:        #c7d9d2;   /* 7.34:1 */
    --color-side-text-strong: var(--color-white);
    --color-side-muted:       #9dbcaf;   /* 5.26:1 */
    --color-side-accent:      #a8dfb4;   /* 7.13:1 */

    --color-side-fill:        rgba(255, 255, 255, .06);
    --color-side-fill-strong: rgba(255, 255, 255, .14);
    --color-side-stroke:      rgba(255, 255, 255, .12);

    /* Contorno do avatar da conta. O stroke normal (.12) some sobre o teal e o
       avatar deixa de parecer avatar; .45 separa sem competir com o conteúdo. */
    --color-side-stroke-strong: rgba(255, 255, 255, .45);


    /* ======================================================================
       7. CONVERSAS (chamados)
       Fundo por origem da mensagem, alinhado aos tons de feedback.
       ====================================================================== */

    --color-message-client-surface:   var(--color-info-surface);
    --color-message-client-border:    var(--color-info-border);
    --color-message-team-surface:     var(--color-success-surface);
    --color-message-team-border:      var(--color-success-border);
    --color-message-internal-surface: var(--color-warning-surface);
    --color-message-internal-border:  var(--color-warning-border);
    /* O registro automático não tem par próprio: deixou de ser balão e virou
       marco da linha do tempo, desenhado com --color-border e os tons de texto. */


    /* ======================================================================
       8. TIPOGRAFIA
       ====================================================================== */

    --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Monoespaçada da pilha do sistema, sem arquivo para baixar: só a página de
       referência do design system usa, para exibir nome de token e trecho de
       código com alinhamento de coluna. Interface de produto não usa mono. */
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

    /* Escala fechada: são os ÚNICOS font-size permitidos. Sempre inteiro. */
    --fs-xs:  12px;   /* meta, legenda, hint, label, cabeçalho de tabela, badge */
    --fs-sm:  14px;   /* corpo padrão da interface */
    --fs-md:  16px;   /* título de card e de seção */
    --fs-lg:  18px;   /* título de página, de modal e de erro */
    --fs-xl:  20px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;
    --fs-4xl: 36px;
    --fs-5xl: 48px;
    --fs-6xl: 60px;

    --fw-regular:  400;   /* corpo */
    --fw-medium:   500;   /* rótulo, link, item de tabela, aba */
    --fw-semibold: 600;   /* título, botão primário, badge, número */

    --lh-tight:   1.25;
    --lh-base:    1.45;
    --lh-relaxed: 1.65;

    /* Ajuste ótico por tamanho — quanto maior o texto, mais fecha. */
    --tracking-title:  -.025em;
    --tracking-card:   -.01em;
    --tracking-number: -.03em;
    --tracking-hero:   -.035em;
    --tracking-caps:    .08em;


    /* ======================================================================
       9. ESPAÇAMENTO
       Escala fechada. Antes desta seção o CSS usava 7, 11, 13 e 17px sem
       critério; todos colapsaram para o degrau vizinho.
       ====================================================================== */

    --space-1:  4px;
    --space-2:  8px;
    --space-2-5: 10px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Respiro horizontal da página. Cai para 16px em ≤900px — por isso nunca
       escreva 24px literal onde o gutter é que manda. */
    --gutter: var(--space-6);


    /* ======================================================================
       10. GEOMETRIA DE CONTROLE
       Variante muda cor. Nunca altura, raio ou tamanho de ícone.
       ====================================================================== */

    --control-h:         40px;
    --control-h-compact: 32px;
    /* Fechar do diálogo: um degrau abaixo do controle cheio, para não competir
       com o título ao lado, e acima do compacto, porque é alvo de clique
       isolado no canto. Não use como altura de botão. */
    --control-h-close:   34px;
    --icon-size:         16px;
    --avatar-size-sm:    28px;
    --avatar-font-sm:    10px;

    --radius-control: 6px;    /* botão, input, select, ícone, aba */
    --radius-box:     8px;    /* card, modal, menu, notice, toast */
    --radius-bubble:  14px;   /* balão de conversa — o canto do lado de quem fala fecha em --radius-control */
    --radius-pill:    999px;  /* badge, progress, switch */
    --radius-full:    50%;    /* avatar, dot */

    --border-width:          1px;
    --border-width-emphasis: 3px;   /* faixa de acento, borda-guia de notice */


    /* ======================================================================
       11. ELEVAÇÃO
       Sombra só em camada flutuante. Conteúdo em fluxo usa borda.
       ====================================================================== */

    --shadow-xs:    0 4px 14px rgba(16, 43, 36, .07);
    --shadow-menu:  0 14px 38px rgba(16, 43, 36, .2);
    --shadow-modal: 0 24px 80px rgba(16, 43, 36, .3);
    /* O toast não tem sombra por decisão de estilo: o preenchimento sólido do
       tom já o separa do fundo. Não reintroduzir --shadow-toast. */

    /* Anel de foco de controle preenchido. O contorno de foco por teclado é
       --focus-outline, aplicado via :focus-visible. */
    --focus-ring:    0 0 0 3px var(--color-primary-surface);
    --focus-outline: 2px solid var(--color-primary-500);
    --focus-offset:  2px;


    /* ======================================================================
       12. CONTAINERS
       ====================================================================== */

    --container-sidebar:           262px;
    --container-sidebar-collapsed: 72px;
    --container-modal-sm:          560px;
    --container-modal-confirm:     440px;
    --container-confirm-height:    200px;
    --container-modal-md:          860px;
    --container-modal-lg:          1080px;
    /* Ficha com três blocos de propriedade à esquerda e feed à direita:
       em 1080px as duas colunas ficavam apertadas ao mesmo tempo. */
    --container-modal-xl:         1240px;
    --container-lightbox:          1100px;
    --container-auth-card:         400px;
    --container-search:            560px;
    --container-search-inline:     320px;  /* busca que divide a toolbar com filtros */
    --container-datepicker:        288px;  /* 7 dias de 34px + gaps + padding */
    --container-prose:             76ch;
    --container-measure:           42ch;   /* linha de leitura de estado vazio */


    /* ======================================================================
       13. MOVIMENTO
       ====================================================================== */

    --transition-fast:   .12s ease;
    --transition-base:   .15s ease;
    --transition-layout: .2s cubic-bezier(.4, 0, .2, 1);
    --transition-enter:  .24s cubic-bezier(.22, 1, .36, 1);


    /* ======================================================================
       14. CAMADAS
       Escala fechada de z-index. Valor fora dela é bug.
       ====================================================================== */

    --z-base:     1;
    --z-raised:   2;
    --z-dropdown: 80;
    --z-sticky:   90;
    --z-overlay:  100;
    --z-skip:     200;
}

/* ==========================================================================
   BREAKPOINTS

   `@media` não lê custom property, então os valores abaixo são documentação
   normativa, não código. São os ÚNICOS quatro pontos de quebra do sistema —
   antes desta consolidação existiam sete (640, 760, 900, 901, 1180, 1181, 1440),
   e o 760 da sidebar divergia do 900 do resto.

     --bp-sm    640px   coluna única em grades densas de métrica
     --bp-md    900px   sidebar vira topo · grid 1 coluna · gutter 16px
     --bp-lg   1180px   col-3/4/5 → 6 · col-7/8 → 12 · stats 2 col
     --bp-xl   1440px   teto da rolagem horizontal do quadro

   O CSS é desktop-first: escreva `max-width`, no mesmo sentido do resto.
   ========================================================================== */