/* ============================================================
   HIT Design System — valores crus
   Fonte da verdade: design/main.pen (variáveis do documento).
   Não editar valores aqui sem alterar o .pen junto.
   ============================================================ */

:root {
  /* Superfícies */
  --hit-bg: #f4f6f8;
  --hit-canvas: #ffffff;
  --hit-surface: #ffffff;
  --hit-surface-muted: #f8fafc;
  --hit-elevated: #ffffff;
  --hit-input: #ffffff;

  /* Bordas */
  --hit-border: #dde3ea;
  --hit-border-strong: #c9d1db;

  /* Texto */
  --hit-text: #344054;
  --hit-bright: #0b1220;
  --hit-muted: #667085;
  --hit-subtle: #8b98a9;

  /* Marca. Este é o único hexadecimal de marca do arquivo, e é o padrão de
     cada tema — a camada white-label reescreve --hit-brand-primary, não ele.
     Ver marcaComoVariaveis() e o TenantProvider. A indireção existe porque
     `style` inline no documentElement vence a classe .dark: escrever
     --hit-primary direto matava o par escuro daqui. Todo token derivado do
     laranja, hover incluído desde o R-18, se expressa em color-mix() sobre
     ele: hexadecimal literal aqui embaixo é marca que a troca de cliente não
     alcança.

     hover e primary-strong são derivados, não declarados, pela mesma razão:
     antes do R-18 cada marca trazia o próprio hover, e no tema escuro ele
     escurecia em vez de clarear — derivar por color-mix() fecha isso para
     qualquer marca. primary-strong é acessibilidade, não estética: #FC5700
     rende 3,2:1 como texto sobre superfície clara e reprova no WCAG AA. Os
     78% são o limite medido — acima disso o próprio laranja da HIT cai
     abaixo de 4,5:1 sobre --hit-bg (rende 4,61:1 exatamente nos 78%). Mexer
     no percentual reprova AA; o R-18 tem a tabela das seis marcas do elenco.

     Os percentuais dos derivados são redondos, e não a fração exata do byte
     de alfa que substituem (1A = 26/255 = 10,196%, não 10%). A diferença é
     de meio nível em 255 — invisível, e o token passa a dizer "10% da
     marca" em vez de repetir um byte. */
  --hit-primary: var(--hit-brand-primary, #fc5700);
  --hit-primary-hover: color-mix(in srgb, var(--hit-primary) 90%, black);
  --hit-primary-strong: color-mix(in srgb, var(--hit-primary) 78%, black);
  --hit-primary-soft: color-mix(
    in srgb,
    var(--hit-primary) 10%,
    transparent
  );
  --hit-primary-line: color-mix(
    in srgb,
    var(--hit-primary) 25%,
    transparent
  );

  /* Sidebar */
  --hit-sidebar-bg: #ffffff;
  --hit-sidebar-elevated: #f8fafc;
  --hit-sidebar-border: #e5e7eb;
  --hit-sidebar-footer: #f9fafb;
  --hit-sidebar-text: #0b1220;
  --hit-sidebar-muted: #525c70;
  --hit-sidebar-subtle: #667085;

  /* Navegação. Tinta opaca, não véu: o item da lateral fica sobre
     sidebar-bg, e um véu translúcido ali deixaria passar o que rolar por
     baixo. 5% e 9% reproduzem ao byte os #FFF7F2 e #FFF0E8 do .pen. */
  --hit-nav-hover: color-mix(
    in srgb,
    var(--hit-primary) 5%,
    var(--hit-sidebar-bg)
  );
  --hit-nav-active: color-mix(
    in srgb,
    var(--hit-primary) 9%,
    var(--hit-sidebar-bg)
  );

  /* Hero */
  --hit-hero-from: #172033;
  --hit-hero-via: #263348;
  --hit-hero-to: #39465b;
  --hit-hero-glow: color-mix(in srgb, var(--hit-primary) 22%, transparent);

  /* Gráficos */
  --hit-chart-area-from: color-mix(
    in srgb,
    var(--hit-primary) 22%,
    transparent
  );
  --hit-chart-area-to: color-mix(
    in srgb,
    var(--hit-primary) 2%,
    transparent
  );
  --hit-danger-chip: #ef444426;

  /* Tons semânticos — 7 tons × 5 slots */
  --hit-tone-primary-band: var(--hit-primary);
  --hit-tone-primary-text: var(--hit-primary-strong);
  --hit-tone-primary-value: var(--hit-primary-strong);
  --hit-tone-primary-soft: var(--hit-primary-soft);
  --hit-tone-primary-line: var(--hit-primary-line);

  --hit-tone-info-band: #0284c7;
  --hit-tone-info-text: #0284c7;
  --hit-tone-info-value: #0369a1;
  --hit-tone-info-soft: #0ea5e91a;
  --hit-tone-info-line: #0ea5e940;

  --hit-tone-success-band: #16a34a;
  --hit-tone-success-text: #059669;
  --hit-tone-success-value: #047857;
  --hit-tone-success-soft: #10b9811a;
  --hit-tone-success-line: #10b98140;

  --hit-tone-warning-band: #f59e0b;
  --hit-tone-warning-text: #d97706;
  --hit-tone-warning-value: #b45309;
  --hit-tone-warning-soft: #f59e0b1a;
  --hit-tone-warning-line: #f59e0b40;

  --hit-tone-danger-band: #dc2626;
  --hit-tone-danger-text: #dc2626;
  --hit-tone-danger-value: #b91c1c;
  --hit-tone-danger-soft: #ef44441a;
  --hit-tone-danger-line: #ef444440;

  --hit-tone-accent-band: #7c3aed;
  --hit-tone-accent-text: #7c3aed;
  --hit-tone-accent-value: #6d28d9;
  --hit-tone-accent-soft: #8b5cf61a;
  --hit-tone-accent-line: #8b5cf640;

  --hit-tone-neutral-band: #94a3b8;
  --hit-tone-neutral-text: #8b98a9;
  --hit-tone-neutral-value: #0b1220;
  --hit-tone-neutral-soft: #f8fafc;
  --hit-tone-neutral-line: #dde3ea;

  /* Véu de Modal e Drawer. Mesma base #0F172A das cores de sombra abaixo,
     para o protótipo não ganhar um quinto cinza escuro. */
  --hit-overlay: #0f172a80;

  /* O mesmo véu já composto sobre --hit-bg, em cor opaca. É valor derivado,
     não decisão de design — por isso não está no .pen. Existe porque a calha
     da barra de rolagem recebe só a cor de fundo do <html>, e um véu
     translúcido nunca chega ali (ver html:has(.hit-backdrop) em
     components.css). Recalcular se --hit-overlay ou --hit-bg mudarem. */
  --hit-overlay-canvas: #828791;

  /* Cores de sombra. No .pen chamam-se shadow-1, shadow-2, shadow-md e
     shadow-lg; renumeradas 1..4 aqui para não colidir com as sombras
     compostas --hit-shadow-sm/md/lg logo abaixo. */
  --hit-shadow-1: #0f172a0d;
  --hit-shadow-2: #0f172a12;
  --hit-shadow-3: #0f172a1a;
  --hit-shadow-4: #1118271f;

  /* Sombras compostas. Os offsets são os effect.shadow lidos dos componentes
     Button / Primária e Dashboard Hero no .pen. */
  --hit-shadow-sm:
    0 1px 2px var(--hit-shadow-1), 0 3px 10px var(--hit-shadow-2);
  --hit-shadow-md: 0 10px 28px var(--hit-shadow-3);
  --hit-shadow-lg: 0 18px 40px var(--hit-shadow-4);
  --hit-glow: 0 0 0 3px
    color-mix(in srgb, var(--hit-primary) 18%, transparent);
  --hit-nav-active-glow: inset 3px 0 0 var(--hit-primary);
}

.dark {
  color-scheme: dark;

  --hit-bg: #0a0f17;
  --hit-canvas: #0d1420;
  --hit-surface: #111a27;
  --hit-surface-muted: #0d1622;
  --hit-elevated: #182334;
  --hit-input: #0c1521;

  --hit-border: #263244;
  --hit-border-strong: #3a4960;

  --hit-text: #cbd5e1;
  --hit-bright: #f8fafc;
  --hit-muted: #a7b3c4;
  --hit-subtle: #7f8ea3;

  /* O padrão diverge do claro de propósito, e só se aplica ao cliente sem
     marca própria — com marca de cliente o --hit-brand-primary do
     TenantProvider vence nos dois temas, porque a marca do cliente tem um
     valor só. Os derivados abaixo leem --hit-primary por var() e seguem
     sozinhos; os percentuais é que diferem entre os temas — o escuro pede
     véu mais denso para render o mesmo brilho.

     hover e primary-strong invertem a mistura: no escuro os dois clareiam em
     vez de escurecer. Os 64% de primary-strong são o limite medido sobre
     --hit-elevated, que é o fundo de popup onde o NotificationPanel põe texto
     de 11px. */
  --hit-primary: var(--hit-brand-primary, #fb6a1a);
  --hit-primary-hover: color-mix(in srgb, var(--hit-primary) 90%, white);
  --hit-primary-strong: color-mix(in srgb, var(--hit-primary) 64%, white);
  --hit-primary-soft: color-mix(
    in srgb,
    var(--hit-primary) 10%,
    transparent
  );
  --hit-primary-line: color-mix(
    in srgb,
    var(--hit-primary) 25%,
    transparent
  );

  --hit-sidebar-bg: #080d14;
  --hit-sidebar-elevated: #141e2d;
  --hit-sidebar-border: #263244;
  --hit-sidebar-footer: #060a11;
  --hit-sidebar-text: #e2e8f0;
  --hit-sidebar-muted: #a7b3c4;
  --hit-sidebar-subtle: #7f8ea3;

  /* Única linha do par que não deriva da marca: no escuro o hover da
     lateral é branco, não laranja, e continua branco com marca de cliente.
     Não uniformize com o claro. */
  --hit-nav-hover: #ffffff0d;
  /* Véu, ao contrário do claro: sobre sidebar-bg escuro a tinta opaca a
     9% desapareceria. */
  --hit-nav-active: color-mix(in srgb, var(--hit-primary) 16%, transparent);

  --hit-hero-from: #101827;
  --hit-hero-via: #172338;
  --hit-hero-to: #202e45;
  --hit-hero-glow: color-mix(in srgb, var(--hit-primary) 30%, transparent);

  --hit-chart-area-from: color-mix(
    in srgb,
    var(--hit-primary) 30%,
    transparent
  );
  --hit-chart-area-to: color-mix(
    in srgb,
    var(--hit-primary) 4%,
    transparent
  );
  --hit-danger-chip: #ef444433;

  /* Sem bloco tone-primary aqui: os cinco slots são apelidos de
     --hit-primary/-strong/-soft/-line no :root, e esses quatro já mudam
     neste bloco. Repeti-los seria a segunda fonte que o passo fecha. */

  --hit-tone-info-band: #0284c7;
  --hit-tone-info-text: #38bdf8;
  --hit-tone-info-value: #38bdf8;
  --hit-tone-info-soft: #0ea5e91a;
  --hit-tone-info-line: #0ea5e940;

  --hit-tone-success-band: #16a34a;
  --hit-tone-success-text: #34d399;
  --hit-tone-success-value: #34d399;
  --hit-tone-success-soft: #10b9811a;
  --hit-tone-success-line: #10b98140;

  --hit-tone-warning-band: #f59e0b;
  --hit-tone-warning-text: #fbbf24;
  --hit-tone-warning-value: #fbbf24;
  --hit-tone-warning-soft: #f59e0b1a;
  --hit-tone-warning-line: #f59e0b40;

  --hit-tone-danger-band: #dc2626;
  --hit-tone-danger-text: #f87171;
  --hit-tone-danger-value: #fb7185;
  --hit-tone-danger-soft: #ef44441a;
  --hit-tone-danger-line: #ef444440;

  --hit-tone-accent-band: #7c3aed;
  --hit-tone-accent-text: #a78bfa;
  --hit-tone-accent-value: #a78bfa;
  --hit-tone-accent-soft: #8b5cf61a;
  --hit-tone-accent-line: #8b5cf640;

  --hit-tone-neutral-band: #94a3b8;
  --hit-tone-neutral-text: #7f8ea3;
  --hit-tone-neutral-value: #f8fafc;
  --hit-tone-neutral-soft: #0d1622;
  --hit-tone-neutral-line: #263244;

  --hit-overlay: #00000099;
  --hit-overlay-canvas: #040609;

  --hit-shadow-1: #00000073;
  --hit-shadow-2: #0000002e;
  --hit-shadow-3: #00000057;
  --hit-shadow-4: #00000080;

  --hit-glow: 0 0 0 3px
    color-mix(in srgb, var(--hit-primary) 24%, transparent);
  --hit-nav-active-glow: inset 3px 0 0 var(--hit-primary);
}

/* Modo da barra lateral, escolhido pela marca e independente do tema da
   página — `atlas` é lateral escura mesmo com a aplicação no tema claro.
   Escrito por classe, no documentElement, ao lado de .dark: só os tokens que
   a Sidebar de fato consome entram aqui (--hit-sidebar-* e os dois --hit-nav-*
   que se misturam sobre --hit-sidebar-bg), porque pintar mais que isso
   vazaria o modo para o corpo da aplicação. Vem depois de .dark no arquivo de
   propósito — mesma especificidade, e quem vem depois vence sem
   `!important`. */
.hit-sidebar-light {
  --hit-sidebar-bg: #ffffff;
  --hit-sidebar-elevated: #f8fafc;
  --hit-sidebar-border: #e5e7eb;
  --hit-sidebar-footer: #f9fafb;
  --hit-sidebar-text: #0b1220;
  --hit-sidebar-muted: #525c70;
  --hit-sidebar-subtle: #667085;
  --hit-nav-hover: color-mix(
    in srgb,
    var(--hit-primary) 5%,
    var(--hit-sidebar-bg)
  );
  --hit-nav-active: color-mix(
    in srgb,
    var(--hit-primary) 9%,
    var(--hit-sidebar-bg)
  );
}

.hit-sidebar-dark {
  --hit-sidebar-bg: #080d14;
  --hit-sidebar-elevated: #141e2d;
  --hit-sidebar-border: #263244;
  --hit-sidebar-footer: #060a11;
  --hit-sidebar-text: #e2e8f0;
  --hit-sidebar-muted: #a7b3c4;
  --hit-sidebar-subtle: #7f8ea3;
  /* Mesma exceção do bloco .dark: hover fixo e branco, não misturado com a
     marca. */
  --hit-nav-hover: #ffffff0d;
  --hit-nav-active: color-mix(in srgb, var(--hit-primary) 16%, transparent);
}