/* ──────────────────────────────────────────────────────────────────────── HackStatus — tokens visuais Portados do HackStudio (`src/app/hackstudio-theme.css`) para que o ecossistema fale uma língua só. O que veio de lá são variáveis CSS puras: nenhuma dependência de Tailwind, React ou build. Essa é a razão de portar os TOKENS e não a STACK — o HackStatus precisa abrir quando o resto do ecossistema está degradado, e isso exige HTML e CSS que não passam por nenhuma etapa de construção. O padrão aqui é ESCURO. Até 09/2026 o painel era a única tela clara do ecossistema, contra a regra de dark mode obrigatório do design system — e tela clara numa TV de sala, ligada o dia inteiro, cansa a vista e estoura o contraste do alerta vermelho, que é a única coisa que precisa gritar. Os comentários que explicam a escolha de cada valor estão no arquivo de origem; os que importam para não regredir foram trazidos junto. ──────────────────────────────────────────────────────────────────────── */ :root { color-scheme: dark; --hs-radius-sm: 0.375rem; --hs-radius-md: 0.5rem; --hs-radius-lg: 0.625rem; /* No escuro o laranja precisa clarear para sobreviver ao fundo. */ --hs-orange-300: #c2410c; --hs-orange-400: #ff7a2f; --hs-orange-500: #ff8f4d; --hs-orange: #ff7a2f; --hs-orange-ink: #ff8f4d; --hs-orange-muted: color-mix(in srgb, #ff7a2f 16%, transparent); --hs-orange-subtle: color-mix(in srgb, #ff7a2f 10%, transparent); --hs-ok: #4ade80; --hs-ok-wash: #08210f; --hs-warn: #fbbf24; --hs-warn-wash: #241703; --hs-bad: #f87171; --hs-bad-wash: #2a0e0e; --hs-info: #93b4fd; --hs-info-wash: #0d1730; --hs-background: #0b0b0d; --hs-background-subtle: #0e0e11; --hs-surface: #16151a; --hs-surface-muted: #1a1920; --hs-surface-raised: #1e1d23; --hs-surface-hover: #26252c; /* Era #232329 no Studio: quase indistinguível da superfície, e cartão sem limite visível vira mancha. */ --hs-border: #33313a; --hs-border-subtle: #26252c; --hs-text-primary: #f5f4f2; --hs-text-secondary: #b6b2ad; --hs-text-tertiary: #8b8781; --hs-accent-fg: #1a0d06; --hs-shadow-menu: 0 12px 32px rgb(0 0 0 / 0.55); --hs-shadow-dialog: 0 25px 70px rgb(0 0 0 / 0.6); --hs-scrim: rgb(0 0 0 / 0.65); /* ── Estado operacional ────────────────────────────────────────────── A tradução entre o vocabulário do HackStatus e o do design system. Toda cor de status na tela sai daqui, e não de --hs-ok/--hs-bad direto: assim o dia em que "degradado" precisar de outro tom se resolve em uma linha, e não em trinta regras espalhadas. Os quatro estados são os mesmos que `/api/ingest` aceita. */ --st-operational: var(--hs-ok); --st-operational-wash: var(--hs-ok-wash); --st-degraded: var(--hs-warn); --st-degraded-wash: var(--hs-warn-wash); --st-down: var(--hs-bad); --st-down-wash: var(--hs-bad-wash); --st-unknown: var(--hs-text-tertiary); --st-unknown-wash: var(--hs-surface-muted); /* Barra de disponibilidade: tons dessaturados dos mesmos estados, porque dezenas de blocos lado a lado na cor cheia viram um vitral. */ --st-bar-operational: #2f7d4f; --st-bar-degraded: #9a7215; --st-bar-down: #a03c3c; --st-bar-empty: var(--hs-surface-hover); --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ── Tema claro ── Existe para quem abrir o painel num ambiente muito iluminado. Não é o padrão e não é o caso da TV. Ativado com `data-theme="light"` no . */ :root[data-theme='light'] { color-scheme: light; --hs-orange-300: #fdba74; --hs-orange-400: #f26419; --hs-orange-500: #ea580c; --hs-orange: #f26419; /* Tom para TEXTO e link: 5,2:1. Preenchimento e texto não podem ser o mesmo valor — um precisa de saturação, o outro de contraste. */ --hs-orange-ink: #c2410c; --hs-orange-muted: color-mix(in srgb, #f26419 12%, transparent); --hs-orange-subtle: color-mix(in srgb, #f26419 8%, transparent); --hs-ok: #15803d; --hs-ok-wash: #ecfdf3; --hs-warn: #b45309; --hs-warn-wash: #fef6e7; --hs-bad: #b91c1c; --hs-bad-wash: #fef2f2; --hs-info: #1d4ed8; --hs-info-wash: #eff4ff; --hs-background: #f7f6f4; --hs-background-subtle: #efedea; --hs-surface: #ffffff; --hs-surface-muted: #f7f6f4; --hs-surface-raised: #ffffff; --hs-surface-hover: #f2f1ee; --hs-border: #d6d3d1; --hs-border-subtle: #e7e5e4; --hs-text-primary: #0b0b0d; --hs-text-secondary: #3f3f46; --hs-text-tertiary: #57534e; --hs-accent-fg: #1a0d06; --hs-shadow-menu: 0 12px 32px rgb(0 0 0 / 0.12); --hs-shadow-dialog: 0 25px 70px rgb(0 0 0 / 0.25); --hs-scrim: rgb(17 17 17 / 0.53); --st-bar-operational: #69bd91; --st-bar-degraded: #e8b54e; --st-bar-down: #e06a70; }