/* Tokens visuais — docs/DESIGN.md. Único arquivo com valores de cor e fonte. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }

:root {
  /* Cores */
  --cor-fundo: #F4F6F7;
  --cor-superficie: #FFFFFF;
  --cor-superficie-2: #F7F9FA;
  --cor-borda: #DDE3E6;
  --cor-borda-campo: #C9D2D6;
  --cor-linha: #EDF0F2;
  --cor-texto: #1B262C;
  --cor-texto-2: #3D4B52;
  --cor-texto-3: #5B6B73;
  --cor-destaque: #146A85;
  --cor-destaque-escuro: #0E5165;
  --cor-destaque-suave: #E3F1F5;
  --cor-fita2: #C2410C;
  --cor-sem-fita: #B8C3C9;
  --cor-girar: #4AA3C9; /* girar "Gira" na linha da peça: azul mais claro que a Fita 1, distinto da Fita 2 */
  --cor-aviso-fundo: #FEF3E2;
  --cor-aviso-texto: #8A3C07;
  --cor-erro-fundo: #FDECEA;
  --cor-erro-texto: #B42318;
  --cor-sucesso-fundo: #E7F5EC;
  --cor-sucesso-texto: #1D6B3A;
  /* Só para a etiqueta (fiel ao térmico: tinta preta em papel branco) */
  --cor-etiqueta-tinta: #000000;
  --cor-etiqueta-papel: #FFFFFF;
  /* Folha do plano de corte (etapa 6b). A cor do material vem do cadastro;
     sem cor, cinza. O tom claro é 20% da cor forte sobre branco. */
  --cor-material-padrao: #7A868C;
  --cor-material-padrao-claro: #E4E7E8;
  --cor-selo-retalho: #2B3236;
  --cor-traco-fita: #1B262C;
  --cor-usinagem: #1B262C;
  /* Vista 3D (etapa 7): peça em foco — não conflita com as fitas nem com os materiais */
  --cor-realce-3d: #F2B705;
  /* Tela de peças V2 (etapa 9): faixa escura do projeto, peça aberta e cor por tipo de módulo */
  --cor-faixa-projeto: #0E4A5C;
  --cor-faixa-projeto-texto: #FFFFFF;
  --cor-faixa-projeto-texto-2: #B9D3DB;
  --cor-faixa-contexto: #E6EEF1;
  --cor-faixa-selo: #F2B705;
  --cor-linha-aberta: #FFF8E1;
  --cor-linha-aberta-borda: #E0A800;
  --cor-recalcular: #B45309;
  --cor-tipo-inferior: #146A85;
  --cor-tipo-superior: #6D28D9;
  --cor-tipo-torre: #0F766E;
  --cor-tipo-gaveteiro: #B45309;
  --cor-tipo-nicho: #BE185D;
  --cor-tipo-avulso: #5B6B73;
  /* Tela de peças V2 (etapa 11): linha com erro ou aviso e o piscar de salvo */
  --cor-linha-erro-fundo: #FDEEEC;
  --cor-linha-erro-barra: #D92D20;
  --cor-linha-aviso-fundo: #FFF6DB;
  --cor-linha-aviso-barra: #D97706;
  --cor-salvo-flash: #CDEFD8;
  /* Balões de salvo e de falha da V2 (etapa 11b): sólidos, texto branco (contraste 6,5:1 e 6,6:1) */
  --cor-balao-sucesso: #1D6B3A;
  --cor-balao-erro: #B42318;
  --cor-balao-texto: #FFFFFF;
  --sombra-balao: 0 6px 20px rgba(27, 38, 44, .28);
  /* Setas de eixo da Montagem 3D (ajuste "setas de eixo"): largura, profundidade, altura */
  --cor-eixo-largura: #D92D20;
  --cor-eixo-profundidade: #1F9D55;
  --cor-eixo-altura: #2563EB;
  /* Preencher vão (etapa 19): cota da largura automática, etiqueta "D ↔", selo e linha do grupo */
  --cor-preencher: #2563EB;
  --cor-preencher-fundo: #EAF1FE;

  /* Tipografia */
  --fonte-texto: "IBM Plex Sans", system-ui, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, monospace;
  --tam-legenda: 12px;
  --tam-meta: 13px;
  --tam-base: 14px;
  --tam-balao: 15px;
  --tam-card: 16px;
  --tam-card-lg: 17px;
  --tam-titulo: 22px;

  /* Espaçamento */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 28px;

  /* Raio */
  --raio-campo: 6px;
  --raio-card: 8px;
  --raio-selo: 999px;

  /* Alturas */
  --altura-botao: 40px;
  --altura-botao-compacto: 36px;
  --altura-botao-pequeno: 30px;
  --altura-campo: 38px;
  --altura-toque-min: 44px;

  /* Larguras máximas da página (classe .pagina--trabalho / --media / --leitura no <body>; --total sem limite) */
  --largura-trabalho: 1920px;
  --largura-media: 1440px;
  --largura-leitura: 1280px;
}