/* ============================================================
   SOAS - Camada de tokens
   Três camadas: primitivo -> semântico -> componente.
   Nenhum componente usa hex cru. Tudo passa por var().
   Temas: claro (padrão) e escuro (data-tema="escuro").
   ============================================================ */

:root {
  /* ---------- 1. PRIMITIVOS: cor ---------- */

  /* Azul-prova (cianotipia, tinta de arquivo). Cor do sistema e da aferição. */
  --azul-950: #071620;
  --azul-900: #0A1F2C;
  --azul-800: #10303F;
  --azul-700: #16455A;
  --azul-600: #1D5B75;
  --azul-500: #2A7695;
  --azul-400: #4A96B4;
  --azul-300: #7FAEC2;
  --azul-200: #A9CBD9;
  --azul-100: #D3E3EA;
  --azul-050: #EDF3F6;

  /* Carbono (neutro frio levemente esverdeado). Estrutura, texto, papel. */
  --carbono-990: #070C0D;
  --carbono-950: #0A1113;
  --carbono-900: #111A1C;
  --carbono-850: #16201F;
  --carbono-800: #1B2528;
  --carbono-700: #2A3639;
  --carbono-600: #3E4C4F;
  --carbono-500: #5C6B6E;
  --carbono-400: #7C8A8D;
  --carbono-300: #A8B4B6;
  --carbono-200: #CBD4D5;
  --carbono-100: #E3E9E9;
  --carbono-050: #F1F4F3;
  --carbono-000: #FAFCFB;

  /* Âmbar (ressalva). Nunca significa culpa, significa "leia a condição". */
  --ambar-800: #6B4409;
  --ambar-700: #8A5A12;
  --ambar-500: #B5811F;
  --ambar-400: #CE9B33;
  --ambar-300: #E0B85E;
  --ambar-100: #F6E9CC;
  --ambar-050: #FCF6E9;

  /* Líquen (aferido, coleta viva). Confirmação sóbria, não comemoração. */
  --liquen-800: #1F4433;
  --liquen-700: #2E5D45;
  --liquen-500: #3F7F5E;
  --liquen-300: #7FC2A0;
  --liquen-200: #BEDCCB;
  --liquen-100: #E1EFE7;

  /* Óxido (falha de sistema). Reservado ao que é responsabilidade da Cosmos. */
  --oxido-800: #5F2318;
  --oxido-700: #7E2F22;
  --oxido-500: #A34433;
  --oxido-300: #D98570;
  --oxido-100: #F2DCD6;

  /* ---------- 1. PRIMITIVOS: espaço (base 4px) ---------- */
  --e-0: 0;
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.25rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-20: 5rem;

  /* ---------- 1. PRIMITIVOS: tipografia ---------- */
  --fonte-documento: "Newsreader", "Iowan Old Style", Georgia, serif;
  --fonte-interface: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --fonte-dado: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --t-2xs: 0.6875rem;  /* 11px  rótulo de máquina, selo */
  --t-xs: 0.78125rem;  /* 12.5px  denominador, janela */
  --t-sm: 0.875rem;    /* 14px  apoio */
  --t-base: 1rem;      /* 16px  interface */
  --t-md: 1.125rem;    /* 18px  leitura de documento */
  --t-lg: 1.375rem;    /* 22px  título de bloco */
  --t-xl: 1.75rem;     /* 28px  título de seção */
  --t-2xl: 2.25rem;    /* 36px  número em cartão */
  --t-3xl: 3.25rem;    /* 52px  número em destaque */

  --peso-leve: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  --altura-apertada: 1.15;
  --altura-normal: 1.45;
  --altura-leitura: 1.7;

  --tracking-maquina: 0.09em;  /* rótulos em caixa alta */
  --tracking-numero: -0.02em;

  /* ---------- 1. PRIMITIVOS: forma, sombra, tempo ---------- */
  --raio-0: 0;
  --raio-1: 2px;
  --raio-2: 4px;
  --raio-3: 8px;
  --raio-pilula: 999px;

  --regua: 3px;        /* filete de margem do bloco, a assinatura do sistema */
  --fio: 1px;

  --sombra-1: 0 1px 2px rgb(7 22 32 / 0.06);
  --sombra-2: 0 2px 6px rgb(7 22 32 / 0.08), 0 1px 2px rgb(7 22 32 / 0.06);
  --sombra-3: 0 12px 32px rgb(7 22 32 / 0.18);

  --tempo-curto: 120ms;
  --tempo-medio: 180ms;
  --tempo-longo: 280ms;
  --curva: cubic-bezier(0.2, 0, 0.1, 1);

  --toque-min: 48px;   /* alvo mínimo no celular */
  --largura-leitura: 62ch;

  /* ---------- 2. SEMÂNTICOS: tema claro ---------- */
  --fundo: var(--carbono-000);
  --fundo-tramado: var(--carbono-050);
  --superficie: #FFFFFF;
  --superficie-2: var(--carbono-050);
  --superficie-3: var(--carbono-100);
  --superficie-invertida: var(--azul-900);

  --texto: var(--carbono-900);
  --texto-2: var(--carbono-600);
  --texto-3: var(--carbono-500);
  --texto-invertido: var(--carbono-000);

  --borda: var(--carbono-200);
  --borda-fraca: var(--carbono-100);
  --borda-forte: var(--carbono-400);

  --acento: var(--azul-700);
  --acento-forte: var(--azul-800);
  --acento-fraco: var(--azul-050);
  --acento-borda: var(--azul-200);
  --acento-texto: var(--azul-800);
  --sobre-acento: #FFFFFF;

  --aferido: var(--liquen-700);
  --aferido-fundo: var(--liquen-100);
  --aferido-borda: var(--liquen-200);

  --ressalva: var(--ambar-700);
  --ressalva-fundo: var(--ambar-050);
  --ressalva-borda: var(--ambar-300);

  --falha: var(--oxido-700);
  --falha-fundo: var(--oxido-100);
  --falha-borda: var(--oxido-300);

  --anel-foco: var(--azul-500);
  --anel-largura: 2px;
  --anel-recuo: 2px;

  /* Hachura: a textura da lacuna. Onde teria número e não tem. */
  --hachura-tinta: rgb(22 69 90 / 0.16);
  --hachura-fundo: var(--azul-050);
  --hachura: repeating-linear-gradient(
    -45deg,
    var(--hachura-tinta) 0 1px,
    transparent 1px 7px
  );

  /* ---------- 3. COMPONENTE ---------- */

  /* bloco de número */
  --numero-fundo: var(--superficie);
  --numero-borda: var(--borda-fraca);
  --numero-regua: var(--aferido);
  --numero-valor: var(--texto);
  --numero-rotulo: var(--texto-2);
  --numero-denominador: var(--texto-2);
  --numero-janela: var(--texto-3);
  --numero-padding: var(--e-5);

  /* recusa */
  --recusa-fundo: var(--acento-fraco);
  --recusa-borda: var(--acento-borda);
  --recusa-regua: var(--acento);
  --recusa-titulo: var(--acento-texto);
  --recusa-texto: var(--texto);
  --recusa-hachura: var(--hachura);

  /* amostra insuficiente */
  --amostra-fundo: var(--ressalva-fundo);
  --amostra-borda: var(--ressalva-borda);
  --amostra-regua: var(--ressalva);
  --amostra-trilho: var(--carbono-200);
  --amostra-preenchido: var(--ambar-500);

  /* aferidor de coleta */
  --aferidor-fundo: var(--superficie-2);
  --aferidor-borda: var(--borda);
  --aferidor-viva: var(--aferido);
  --aferidor-atrasada: var(--ressalva);
  --aferidor-parada: var(--falha);
  --aferidor-faixa-altura: 10px;

  /* selo de aferição */
  --selo-texto: var(--texto-3);
  --selo-borda: var(--borda);
  --selo-fundo: transparent;

  /* campo de formulário */
  --campo-fundo: var(--superficie);
  --campo-borda: var(--borda-forte);
  --campo-borda-foco: var(--acento);
  --campo-texto: var(--texto);
  --campo-rotulo: var(--texto-2);
  --campo-altura: var(--toque-min);
  --campo-raio: var(--raio-2);

  /* botão */
  --botao-fundo: var(--acento);
  --botao-texto: var(--sobre-acento);
  --botao-fundo-hover: var(--acento-forte);
  --botao-altura: var(--toque-min);
  --botao-raio: var(--raio-2);
  --botao-secundario-borda: var(--borda-forte);
  --botao-secundario-texto: var(--texto);

  /* documento e aceite */
  --documento-fundo: var(--superficie);
  --documento-texto: var(--texto);
  --documento-medida: var(--largura-leitura);
  --aceite-fundo: var(--acento-fraco);
  --aceite-borda: var(--acento);

  /* segredo de uma vez */
  --segredo-veu: rgb(7 22 32 / 0.72);
  --segredo-fundo: var(--superficie);
  --segredo-borda: var(--ambar-500);
  --segredo-caixa-fundo: var(--carbono-950);
  --segredo-caixa-texto: var(--ambar-300);

  /* tabela */
  --tabela-cabecalho: var(--texto-3);
  --tabela-linha: var(--borda-fraca);
  --tabela-hover: var(--superficie-2);
  --tabela-densidade: var(--e-3);

  /* gráfico */
  --grafico-linha: var(--azul-600);
  --grafico-barra: var(--azul-300);
  --grafico-grade: var(--borda-fraca);
  --grafico-evento: var(--ambar-500);
  --grafico-lacuna: var(--hachura-tinta);
}

/* ============================================================
   Tema escuro. Só a camada semântica muda.
   Console interno abre aqui por padrão.
   ============================================================ */
[data-tema="escuro"] {
  --fundo: var(--carbono-990);
  --fundo-tramado: var(--carbono-950);
  --superficie: var(--carbono-900);
  --superficie-2: var(--carbono-850);
  --superficie-3: var(--carbono-800);
  --superficie-invertida: var(--carbono-050);

  --texto: #E8EEED;
  --texto-2: #A6B5B6;
  --texto-3: #7E8E90;
  --texto-invertido: var(--carbono-950);

  --borda: #253032;
  --borda-fraca: #1C2527;
  --borda-forte: #3A4A4C;

  --acento: var(--azul-400);
  --acento-forte: var(--azul-300);
  --acento-fraco: #0C2029;
  --acento-borda: #1B4557;
  --acento-texto: var(--azul-300);
  --sobre-acento: var(--azul-950);

  --aferido: var(--liquen-300);
  --aferido-fundo: #0E2419;
  --aferido-borda: #22523B;

  --ressalva: var(--ambar-300);
  --ressalva-fundo: #241B08;
  --ressalva-borda: #5A4413;

  --falha: var(--oxido-300);
  --falha-fundo: #2A1209;
  --falha-borda: #62281C;

  --anel-foco: var(--azul-300);

  --hachura-tinta: rgb(127 174 194 / 0.20);
  --hachura-fundo: #0C2029;

  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-2: 0 2px 8px rgb(0 0 0 / 0.45);
  --sombra-3: 0 16px 40px rgb(0 0 0 / 0.6);

  --segredo-veu: rgb(3 8 9 / 0.82);
  --segredo-caixa-fundo: #04090A;
  --segredo-caixa-texto: var(--ambar-300);

  --grafico-linha: var(--azul-300);
  --grafico-barra: var(--azul-600);
  --grafico-evento: var(--ambar-400);
}