/*
  Tokens extraidos de exemplo.png por amostragem de pixel.
  Metodo e medicoes brutas em docs/DESIGN_TOKENS.md.

  NENHUM valor visual pode ser escrito fora deste arquivo.
  Se uma cor, fonte, raio, sombra ou espacamento aparecer em outro CSS,
  o codigo esta errado.
*/

:root {
  /* ---------------------------------------------------------------
     Paleta baseada em exemplo2.png: dashboard claro, divisores finos
     e acento laranja.
     --------------------------------------------------------------- */
  --laranja-95: #fff1ec;
  --laranja-90: #ffe4da;
  --laranja-80: #ffc7b5;
  --laranja-base: #ff4f12;
  --laranja-45: #d94b1f;
  --laranja-35: #a43a18;

  /* ---------------------------------------------------------------
     Superficies
     --------------------------------------------------------------- */
  --cor-superficie-app: #f7f7f7;
  --cor-superficie-app-elevada: #efefef;
  --cor-superficie-app-campo: #eeeeee;
  --cor-superficie-app-botao: #f2f2f2;
  --cor-superficie-conteudo: #ffffff;
  --cor-superficie-card: #ffffff;
  --cor-superficie-suave: var(--laranja-95);
  --cor-superficie-neutra: #f5f5f5;

  /* ---------------------------------------------------------------
     Texto
     --------------------------------------------------------------- */
  --cor-texto-forte: #242424;
  --cor-texto-medio: #5f5f5f;
  --cor-texto-mudo: #777777;
  --cor-texto-invertido: #ffffff;
  --cor-texto-link: var(--laranja-45);

  /* ---------------------------------------------------------------
     Acentos
     --------------------------------------------------------------- */
  --cor-acento-laranja: var(--laranja-base);
  --cor-acento-vermelho: #ef3b18;
  --cor-acento-ambar: #f2bd6d;
  --cor-acento-azul: #79abfe;
  --cor-acento-rosa: #ff95c8;
  --cor-acento-teal: #a2e8de;
  --cor-acento-cinza: #c5c5c5;

  /* ---------------------------------------------------------------
     Estados. Derivados dos acentos, escurecidos ate passar AA sobre
     branco. A referencia nao traz verde, entao ele e o unico tom novo.
     --------------------------------------------------------------- */
  --cor-estado-sucesso: #17795e;
  --cor-estado-alerta: #8a5a00;
  --cor-estado-erro: #c0341d;
  --cor-estado-info: var(--laranja-45);
  --cor-estado-neutro: var(--cor-texto-mudo);

  --cor-estado-sucesso-fundo: #e6f4ef;
  --cor-estado-alerta-fundo: #fdf3e0;
  --cor-estado-erro-fundo: #fdecea;
  --cor-estado-info-fundo: var(--laranja-95);

  /* ---------------------------------------------------------------
     Bordas e divisores
     --------------------------------------------------------------- */
  --cor-borda: #eeeeee;
  --cor-borda-forte: #dddddd;
  --cor-borda-foco: var(--laranja-base);
  --cor-backdrop: rgb(0 0 0 / 0.4);

  --borda-fina: 1px;
  --borda-media: 2px;
  --deslocamento-foco: 2px;
  --tamanho-minimo: 1px; /* recorte de conteudo so para leitor de tela */

  /* ---------------------------------------------------------------
     Tipografia. A fonte da referencia e proprietaria: system stack.
     --------------------------------------------------------------- */
  --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --texto-xs: 0.75rem;   /* 12px */
  --texto-sm: 0.8125rem; /* 13px */
  --texto-md: 0.875rem;  /* 14px */
  --texto-lg: 1rem;      /* 16px */
  --texto-xl: 1.25rem;   /* 20px */
  --texto-2xl: 1.5rem;   /* 24px */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;

  --altura-linha-apertada: 1.25;
  --altura-linha-base: 1.5;

  /* ---------------------------------------------------------------
     Espacamento. Base 4px.
     --------------------------------------------------------------- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.25rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-9: 2.3125rem; /* 37px, margem do card ao painel */
  --esp-12: 3rem;

  /* ---------------------------------------------------------------
     Geometria, medida na referencia
     --------------------------------------------------------------- */
  --altura-topbar: 72px;
  --largura-sidebar: 256px;
  --altura-item-sidebar: 40px;
  --altura-linha-tabela: 36px;

  /* ---------------------------------------------------------------
     Raios
     --------------------------------------------------------------- */
  --raio-sm: 4px;
  --raio-md: 6px;
  --raio-lg: 8px;
  --raio-pill: 999px;

  /* ---------------------------------------------------------------
     Sombras. A referencia usa elevacao discreta: os cards se separam
     por bordas finas, nao por sombra pesada.
     --------------------------------------------------------------- */
  --sombra-card: none;
  --sombra-flutuante: 0 8px 24px rgb(0 0 0 / 0.12);
  --sombra-foco: 0 0 0 2px var(--cor-superficie-card), 0 0 0 4px var(--cor-borda-foco);

  /* ---------------------------------------------------------------
     Movimento
     --------------------------------------------------------------- */
  --transicao-rapida: 120ms ease;
  --transicao-base: 200ms ease;

  --z-conteudo: 1;
  --z-cabecalho: 10;
  --z-modal: 100;
  --z-toast: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transicao-rapida: 0ms;
    --transicao-base: 0ms;
  }
}