/* ============================================================================
   TOKENS — a única fonte de cor, espaço, tipografia e elevação.
   ============================================================================

   Os tokens de MARCA (--marca-*) são os da Flua, fixos para as duas empresas.
   Nada os reescreve em runtime: o tema escuro é o bloco [data-tema='escuro']
   abaixo, e um estilo inline no <html> passaria por cima dele.

   Nenhum componente usa cor literal. Se você precisou escrever um #hex fora
   deste arquivo, falta um token.
   ========================================================================== */

@font-face {
  font-family: 'Alan Sans';
  src: url('/fonts/AlanSans-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Marca Flua ───────────────────────────────────────────────────────── */
  --marca-primaria: #0b2c45;
  --marca-primaria-escura: #071e30;
  --marca-primaria-clara: #cceef0;
  --marca-primaria-contraste: #ffffff;
  --marca-secundaria: #f0283c;
  --marca-acento: #fd7444;
  --marca-sidebar-fundo: #f9f0df;

  /* Derivados translúcidos da primária, para realce e foco.
     Recalculados por js/marca.js quando a marca muda. */
  --marca-primaria-suave: rgba(11, 44, 69, 0.06);
  --marca-primaria-media: rgba(11, 44, 69, 0.14);
  --marca-primaria-foco: rgba(11, 44, 69, 0.22);

  /* Acento para TEXTO (link, rótulo em foco, título de destaque) — nunca pra
     fundo ou borda, só letra sobre a superfície do app.
     `-escura` foi pensada pra ficar legível sobre fundo CLARO; a Superclínica
     tem `-escura: #0F1F3E`, quase preto, e usada como texto no tema escuro
     ficava invisível — texto quase-preto sobre fundo quase-preto. No claro
     este token é igual a `-escura`; no escuro (ver bloco `[data-tema]`
     abaixo) vira `-clara`, pensada pra o sentido inverso. */
  --marca-acento-texto: var(--marca-primaria-escura);

  /* Fundo do item selecionado no menu. Claro e sutil no tema claro; no escuro,
     a mesma opacidade baixa quase não aparece sobre um fundo já escuro, por
     isso sobe um degrau (ver `[data-tema='escuro']`). Nas duas, a cor sai da
     paleta Flua, igual nas duas empresas. */
  --marca-selecao: #cceef0;

  /* ── Estado (iguais nas duas marcas, de propósito) ─────────────────────────
     Verde de "permitido" e vermelho de "bloqueado" precisam significar a mesma
     coisa nos dois painéis. Não são cor de marca. */
  --estado-ok: #17765f;
  --estado-ok-fundo: #d9f4e8;
  --estado-atencao: #9a5a00;
  --estado-atencao-fundo: #fdebc8;
  --estado-erro: #b4233a;
  --estado-erro-fundo: #fbd9dd;
  --estado-info: #0b2c45;
  --estado-info-fundo: #cceef0;
  --estado-neutro: #4f6577;
  --estado-neutro-fundo: #ebeef0;
  --estado-roxo: #0b2c45;
  --estado-roxo-fundo: #f9f0df;
  --selo-ok: #126250;
  --selo-ok-fundo: #b8e8d1;
  --selo-atencao: #8a4f00;
  --selo-atencao-fundo: #fbd89a;
  --selo-erro: #a01e33;
  --selo-erro-fundo: #f8c5cc;
  --selo-info: #0b2c45;
  --selo-info-fundo: #b6e4e8;

  /* ── Superfície e texto ───────────────────────────────────────────────── */
  --fundo-app: #f9f0df;
  --fundo-painel: #ffffff;
  --fundo-cartao: #ffffff;
  --fundo-elevado: #ffffff;
  --fundo-sutil: #fbf6ec;
  --fundo-hover: #e6f5f6;

  --texto: #0b2c45;
  --texto-suave: #2a4155;
  --texto-fraco: #4f6577;
  --texto-tenue: #5a6e80;
  --texto-invertido: #ffffff;

  --borda: #c6d0d8;
  --borda-forte: #aebac4;
  --borda-campo: #8494a2;
  --borda-cartao: rgba(11, 44, 69, 0.24);
  --barra-trilho: #cceef0;

  /* ── Tipografia ───────────────────────────────────────────────────────── */
  --fonte-titulo: 'Alan Sans', Arial, sans-serif;
  --fonte-corpo: 'Alan Sans', Arial, sans-serif;
  --fonte-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --texto-xs: 0.75rem;
  --texto-sm: 0.8125rem;
  --texto-base: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;
  --texto-3xl: 2.25rem;

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

  /* ── Espaço (escala de 4) ─────────────────────────────────────────────── */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e8: 32px;
  --e10: 40px;
  --e12: 48px;

  /* ── Raio ─────────────────────────────────────────────────────────────── */
  --raio-sm: 8px;
  --raio: 12px;
  --raio-lg: 16px;
  --raio-xl: 24px;
  --raio-pill: 999px;

  /* ── Elevação ─────────────────────────────────────────────────────────── */
  --sombra-sm: none;
  --sombra: none;
  --sombra-cartao: 0 1px 2px rgba(11, 44, 69, 0.06), 0 6px 18px -8px rgba(11, 44, 69, 0.18);
  --sombra-md: 0 8px 24px -6px rgba(11, 44, 69, 0.16);
  --sombra-lg: 0 12px 32px rgba(11, 44, 69, 0.14);
  --sombra-xl: 0 24px 50px -24px rgba(11, 44, 69, 0.28), 0 12px 32px rgba(11, 44, 69, 0.12);
  --veu-fundo: rgba(11, 44, 69, 0.4);
  --gradiente-marca: linear-gradient(90deg, #f0283c 0%, #fd7444 50%, #ff960e 100%);
  --gradiente-marca-vertical: linear-gradient(180deg, #f0283c 0%, #fd7444 50%, #ff960e 100%);
  --sobre-gradiente: #0b2c45;
  --kpi-brilho: #cceef0;
  --seta-seletor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%230b2c45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --largura-sidebar: 224px;
  --largura-sidebar-colapsada: 68px;

  /* ── Movimento ────────────────────────────────────────────────────────── */
  --transicao-rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-seletor: 160ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Camadas ──────────────────────────────────────────────────────────── */
  --z-menu: 500;
  --z-modal: 1000;
  --z-aviso: 1500;

  --viz-1: #0b2c45;
  --viz-2: #fd7444;
  --viz-3: #f0283c;
  --viz-4: #ff960e;
  --viz-outros: #8494a2;

  --viz-seq-1: #e3f5f6;
  --viz-seq-2: #cceef0;
  --viz-seq-3: #8fb9c6;
  --viz-seq-4: #4d7489;
  --viz-seq-5: #0b2c45;
}

/* ── Tema escuro ─────────────────────────────────────────────────────────── */
[data-tema='escuro'] {
  --fundo-app: #081d2d;
  --fundo-painel: #0b2335;
  --fundo-cartao: #0e2638;
  --fundo-elevado: #143047;
  --fundo-sutil: #11293d;
  --fundo-hover: #183750;

  --texto: #eaf2f6;
  --texto-suave: #c9d6df;
  --texto-fraco: #a9bcc9;
  --texto-tenue: #8fa4b3;

  --borda: #22435b;
  --borda-forte: #2f5672;
  --borda-campo: #55798f;
  --borda-cartao: rgba(204, 238, 240, 0.16);
  --barra-trilho: rgba(204, 238, 240, 0.14);

  --marca-sidebar-fundo: #081d2d;

  /* Ver a explicação em :root — no claro este token é a cor "escura" da
     marca (legível sobre fundo claro); aqui ele vira a "clara" (legível
     sobre fundo escuro). */
  --marca-primaria: #cceef0;
  --marca-primaria-escura: #ffffff;
  --marca-primaria-contraste: #0b2c45;
  --marca-primaria-suave: rgba(204, 238, 240, 0.08);
  --marca-primaria-media: rgba(204, 238, 240, 0.16);
  --marca-primaria-foco: rgba(204, 238, 240, 0.3);
  --marca-acento-texto: var(--marca-primaria-clara);

  /* Um degrau mais forte que no claro — ver a explicação em :root. */
  --marca-selecao: rgba(204, 238, 240, 0.14);

  /* Fundos de estado ganham opacidade baixa em vez de pastel */
  --estado-ok-fundo: rgba(95, 212, 168, 0.14);
  --estado-atencao-fundo: rgba(255, 196, 107, 0.14);
  --estado-erro-fundo: rgba(255, 138, 148, 0.14);
  --estado-info-fundo: rgba(204, 238, 240, 0.12);
  --estado-neutro-fundo: rgba(169, 188, 201, 0.12);
  --estado-roxo-fundo: rgba(249, 240, 223, 0.12);

  --estado-ok: #5fd4a8;
  --estado-atencao: #ffc46b;
  --estado-erro: #ff8a94;
  --estado-info: #cceef0;
  --estado-neutro: #c9d6df;
  --estado-roxo: #f9f0df;
  --selo-ok: var(--estado-ok);
  --selo-ok-fundo: var(--estado-ok-fundo);
  --selo-atencao: var(--estado-atencao);
  --selo-atencao-fundo: var(--estado-atencao-fundo);
  --selo-erro: var(--estado-erro);
  --selo-erro-fundo: var(--estado-erro-fundo);
  --selo-info: var(--estado-info);
  --selo-info-fundo: var(--estado-info-fundo);

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.45);
  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
  --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --sombra-xl: 0 32px 64px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --veu-fundo: rgba(4, 14, 22, 0.6);
  --kpi-brilho: rgba(204, 238, 240, 0.16);
  --seta-seletor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23cceef0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --viz-1: #cceef0;
  --viz-2: #fd7444;
  --viz-3: #f0283c;
  --viz-4: #ff960e;
  --viz-outros: #6a889c;

  --viz-seq-1: #143047;
  --viz-seq-2: #24506b;
  --viz-seq-3: #4d7f95;
  --viz-seq-4: #8fc3cc;
  --viz-seq-5: #cceef0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}