/* ============================================================
KATUI DESIGN TOKENS — v1.0
Fonte: Figma stkmbHO5u2MQrsABmEk7Ld (páginas Componentes + Fluxo_paciente)
Gerado em: 2026-06-19
IMPORTANTE: ajustes visuais devem ser feitos no Figma, depois reimportados.
NÃO editar valores manualmente sem atualizar o Figma correspondente.
============================================================ */
/*
Google Fonts — adicionar em cada HTML antes de qualquer CSS:
*/
:root {
/* ── TIPOGRAFIA ─────────────────────────────────────────────
Fonte: Componentes > Typography (node 12:3287)
Família: Montserrat (substitui Nunito + Quicksand)
─────────────────────────────────────────────────────────── */
--font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-brand: var(--font-primary);
/* Heading 1 — Montserrat Bold, 55px / line-height 73px */
--text-h1-size: 55px;
--text-h1-line: 73px;
--text-h1-weight: 700;
/* Heading 2 — Montserrat Bold, 34px / line-height 45px */
--text-h2-size: 34px;
--text-h2-line: 45px;
--text-h2-weight: 700;
/* Heading 3 — Montserrat Bold, 21px / line-height 28px */
--text-h3-size: 21px;
--text-h3-line: 28px;
--text-h3-weight: 700;
/* Heading 4 — Montserrat Bold, 13px / line-height 18px */
--text-h4-size: 13px;
--text-h4-line: 18px;
--text-h4-weight: 700;
/* Heading 5 — Montserrat SemiBold, 13px / line-height 18px */
--text-h5-size: 13px;
--text-h5-line: 18px;
--text-h5-weight: 600;
/* Subtitle — Montserrat Bold, 13px / line-height 18px */
--text-subtitle-size: 13px;
--text-subtitle-line: 18px;
--text-subtitle-weight: 700;
/* Body 1 — Montserrat Medium, 15px / line-height 20px */
--text-body1-size: 15px;
--text-body1-line: 20px;
--text-body1-weight: 500;
/* Body 2 — Montserrat Medium, 13px / line-height 18px */
--text-body2-size: 13px;
--text-body2-line: 18px;
--text-body2-weight: 500;
/* Subheader — Montserrat Bold, 13px / line-height 18px (cor teal) */
--text-subheader-size: 13px;
--text-subheader-line: 18px;
--text-subheader-weight: 700;
/* Caption — Montserrat Medium, 13px / line-height 18px */
--text-caption-size: 13px;
--text-caption-line: 18px;
--text-caption-weight: 500;
/* Small — Montserrat Medium, 10px / line-height 13px */
--text-small-size: 10px;
--text-small-line: 13px;
--text-small-weight: 500;
/* ── PALETA PRIMÁRIA ────────────────────────────────────────
Fonte: Componentes > Branding Colours > Primary (node 12:3459)
─────────────────────────────────────────────────────────── */
--katui-teal: #329D9C; /* Gradient Colour 1 — CTA, botões, links ativos */
--katui-green-light: #7BE495; /* Gradient Colour 2 — fim do gradiente CTA */
--katui-green-mid: #56C596; /* Trademark Colour — badges, accents, ícones */
--katui-navy: #205072; /* Name Colour — texto primário, headings */
/* ── PALETA WORDMARK (PR-L8) ────────────────────────────────
Cores extraídas de public/katui-wordmark.svg e katui-lockup.svg.
sage-dark (#5d705f) é a cor principal das letras "Katui".
Único com AA Normal (4.5:1+) sobre fundos claros.
Referência vigente: DESIGN.md; este arquivo é a fonte canônica dos tokens.
─────────────────────────────────────────────────────────── */
--wordmark-green: #5d705f; /* sage-dark — primary colour, letras */
--wordmark-green-dark: #4A594C; /* hover (20% mais escuro, 7.43:1 sobre branco) */
--wordmark-sage-light: #bdc6a9; /* sage-light — detalhe do "u" do K */
--wordmark-sage-mid: #b1bb9d; /* sage-mid — lockup detalhe */
/* Gradientes de CTA */
--gradient-cta: linear-gradient(135deg, #329D9C 0%, #7BE495 100%);
--gradient-cta-dark: linear-gradient(135deg, #2a8786 0%, #5fd37e 100%); /* hover state */
--gradient-cta-horiz: linear-gradient(90deg, #329D9C 0%, #56C596 100%); /* progress bars */
/* ── PALETA SECUNDÁRIA ──────────────────────────────────────
Fonte: Componentes > Branding Colours > Secondary (node 12:3483)
─────────────────────────────────────────────────────────── */
--katui-teal-dark: #2C6975; /* Colour 1 — hover, elementos ativos */
--katui-teal-mid: #68B2A0; /* Colour 2 — ícones, bordas, texto muted */
--katui-mint: #CDE0C9; /* Colour 3 — backgrounds de cards leves */
--katui-mint-light: #E0ECDE; /* Colour 4 — background de tela geral */
/* ── PALETA TERCIÁRIA ───────────────────────────────────────
Fonte: Componentes > Branding Colours > Tertiary (node 12:3525)
─────────────────────────────────────────────────────────── */
--katui-cyan: #47CACC; /* Colour 1 — destaques especiais / mood */
--katui-lavender: #CDB3D4; /* Colour 2 — indicadores mood / wellness */
--katui-rose: #E7B7C8; /* Colour 3 — indicadores mood / wellness */
--katui-peach: #FFBE88; /* Colour 4 — alertas suaves / avisos */
/* ── AGENDA EVENTS ─────────────────────────────────────────
Família cyan/rose/warn com 3 pesos (100/500/700) usada pelo
bloco do modal psi-avail-v2 (.evt-session, .evt-block, etc.)
e pela agenda do psi. 100 = bg tint, 500 = border, 700 = texto
sobre o tint (contraste AA sobre o 100).
─────────────────────────────────────────────────────────── */
--cyan-100: #CFFAFE; /* bg — sessão */
--cyan-500: #06B6D4; /* border — sessão */
--cyan-700: #155E75; /* texto — sessão */
--rose-100: #FFE4E6; /* bg — bloqueio */
--rose-500: #FB7185; /* border — bloqueio */
--rose-700: #9F1239; /* texto — bloqueio */
--warn-500: #F59E0B; /* border — reagendamento pendente */
/* ── DATA VIZ ───────────────────────────────────────────────
Passos de gráfico. Motivo documentado pra existirem fora da
paleta de marca (princípio 1 do PRODUCT.md): a paleta Katui é
deliberadamente dessaturada ("leveza") e reprova no piso de
croma de data viz — os matizes são preservados, só o passo muda.
Validados em 2026-07-22 sobre --surface #FFFFFF:
banda de luminosidade, piso de croma, separação CVD
(ΔE 17,1 deutan · 15,8 tritan), visão normal 18,1 e contraste
≥ 3:1 — ALL CHECKS PASS.
─────────────────────────────────────────────────────────── */
--chart-cost: #12A3A1; /* teal Katui saturado — custo/base que precisa sobrar */
--chart-deduction: #31669F; /* navy Katui saturado — deduções sobre a receita */
/* ── ESTADOS ────────────────────────────────────────────────
Fonte: Componentes > Branding Colours > States (node 12:3507)
─────────────────────────────────────────────────────────── */
--color-success: #7BE495;
--color-success-dark: #56C596;
--color-success-dim: rgba(123, 228, 149, 0.15);
--color-success-text: #2F7A4A; /* AA-safe (5.25:1 sobre branco) — texto pequeno em fundo claro/tint */
--color-warning: #FFCF5C;
--color-warning-dim: rgba(255, 207, 92, 0.15);
--color-warning-border: #FB923C;
--color-warning-text: #92660A; /* AA-safe (5.09:1 sobre branco) — texto pequeno em fundo claro/tint */
--color-error: #F75010;
--color-error-dim: rgba(247, 80, 16, 0.12);
--color-error-border: #FCA5A5;
--color-error-text: #D1420C; /* AA-safe (4.67:1 sobre branco) — texto pequeno em fundo claro/tint */
--color-info: #329D9C;
--color-info-dim: rgba(50, 157, 156, 0.12);
--color-info-border: #FACC15;
--color-info-text: #713F12; /* AA-safe sobre fundo claro/tint */
/* Aliases de compatibilidade com código existente */
--success: var(--color-success);
--success-dim: var(--color-success-dim);
--success-dark: var(--color-success-dark);
--success-text: var(--color-success-text);
--warn: var(--color-warning);
--warn-dim: var(--color-warning-dim);
--warn-text: var(--color-warning-text);
--danger: var(--color-error);
--danger-dim: var(--color-error-dim);
--danger-text: var(--color-error-text);
/* ── CHART PALETTE (PR-9) ────────────────────────────────────
6 cores para graficos de humor/distribuicao. Movidas de hardcoded
em admin-dashboard.html:6648-6653 para tokens para evitar drift
entre surfaces e garantir consistencia em novos charts. */
--chart-1: #5c9bd5; /* Triste — azul */
--chart-2: #9b8fb5; /* Ansioso — roxo */
--chart-3: #d64545; /* Irritado — vermelho */
--chart-4: #8d8d8d; /* Cansado — cinza */
--chart-5: #95e1d3; /* Contente — verde-agua */
--chart-6: #ffd93d; /* Animado — amarelo */
--info: var(--color-info);
--info-dim: var(--color-info-dim);
/* ── BACKGROUNDS & SUPERFÍCIES ──────────────────────────────
Derivados das telas do Figma (Fluxo_paciente)
─────────────────────────────────────────────────────────── */
--bg: #EDF4EB; /* Fundo geral — mint suave (tela do Figma) */
--bg-alt: #E0ECDE; /* Fundo alternativo — secundária Colour 4 */
--surface: #FFFFFF; /* Cards, modais, inputs */
--surface2: #E0ECDE; /* Surface levemente elevado — mint claro (hover/thead). Unificado 2026-07-05: era divergente de style.css, agora fonte única. */
--surface3: var(--katui-mint); /* Surface com cor de marca */
--surface-sunken: var(--katui-mint-light);
/* Superfícies especiais */
--surface-navy: #1B3A5C; /* Card de destaque navy (Questionário Semanal) */
--surface-teal: var(--katui-teal); /* Botão/superfície CTA sólida */
--surface-navy-dim: rgba(27, 58, 92, 0.08);
/* ── TEXTO ──────────────────────────────────────────────────
─────────────────────────────────────────────────────────── */
--text: #205072; /* Texto primário (navy) */
--text-dim: #2C6975; /* Texto secundário (teal escuro) */
--muted: #326256; /* Texto terciário / placeholder. AA fix 2026-07-13: era #68B2A0 (2.48:1
em branco, falhava WCAG AA); mesmo hue/saturação (165°/32%), só mais
escuro — 6.96:1 branco / 5.71:1 --surface2 / 4.81:1 --border (pior caso real). */
--text-inverse: #FFFFFF; /* Texto sobre fundos escuros */
--text-subheader: #2C6975; /* Subheaders em teal. AA fix 2026-07-21: era #329D9C
(--katui-teal), que a 13px/700 do .text-subheader dava
3.26:1 no branco e 2.91:1 em --bg — reprova AA (mínimo
4.5:1; 13px bold não conta como texto grande). Mesmo
matiz, só mais escuro (= --katui-teal-dark): 6.20:1 no
branco, 5.54:1 em --bg. */
--text-brand: var(--katui-navy);
/* ── BORDAS ─────────────────────────────────────────────────
─────────────────────────────────────────────────────────── */
--border: #C8DCC8; /* Bordas de cards e containers. Unificado 2026-07-05: era divergente de style.css, agora fonte única. */
--border-soft: #D8E8D8; /* Bordas sutis. Unificado 2026-07-05: era divergente de style.css, agora fonte única. */
--border-focus: #329D9C; /* Borda em foco (inputs ativos) */
/* ── BORDER RADIUS ──────────────────────────────────────────
─────────────────────────────────────────────────────────── */
--radius-pill: 999px; /* Botões capsule — CTA primário do Figma */
--radius-card: 16px; /* Cards, modais, containers */
--radius-input: 12px; /* Inputs, selects, textareas */
--radius-badge: 999px; /* Badges / chips */
--radius: 16px; /* Alias geral (compatibilidade) */
--radius-sm: 12px; /* Elementos menores (compatibilidade) */
--radius-xs: 8px; /* Elementos pequenos */
/* ── SOMBRAS ────────────────────────────────────────────────
Fonte: Componentes > Shadow (node 12:3356) — X offset descartado.
Ver docs/adr/0002-shadow-scale-x-offset.md: o Figma define X=Y (luz a 45°),
o que projeta a sombra pra LATERAL e lê como névoa em superfícies centradas.
Escala mantém o blur Fibonacci (13/34/55/89/144) e o alpha 13%; o Y recebe
o termo anterior da sequência. X é sempre 0 — exceto sidebars, que projetam
lateralmente de propósito (style.css:100, admin-dashboard.html:803).
X=0 não zera a névoa lateral: blur N se espalha N/2 pra CADA lado. Onde a
superfície branca encosta em fundo colorido, esse rastro aparece. Só o
--shadow-1 tem esse problema (cards sobre --bg); --shadow-2..6 vivem sobre
branco ou overlay. Ver docs/adr/0003-shadow-1-spread-negativo.md.
─────────────────────────────────────────────────────────── */
/* Shadow 1 — Y4, Blur 12, spread -4, #000 alpha 20% — cards em repouso.
O spread negativo encolhe a sombra ANTES de borrar: névoa lateral cai de
~6.5px pra ~2px e a elevação embaixo é preservada. Alpha sobe de 13% pra 20%
pra compensar o spread (senão a sombra some). Mesma técnica de Tailwind/Material. */
--shadow-1: 0 4px 12px -4px rgba(0, 0, 0, 0.20);
/* Shadow 2 — Y8, Blur 34, #000 alpha 13% — cards elevados, hover */
--shadow-2: 0 8px 34px rgba(0, 0, 0, 0.13);
/* Shadow 3 — Y13, Blur 55, #000 alpha 13% — modais, drawer, toast */
--shadow-3: 0 13px 55px rgba(0, 0, 0, 0.13);
/* Shadow 4 — Y21, Blur 89, #000 alpha 13% — superfícies muito grandes */
--shadow-4: 0 21px 89px rgba(0, 0, 0, 0.13);
/* Shadow 5 — Y34, Blur 144, #000 alpha 13% — reservado */
--shadow-5: 0 34px 144px rgba(0, 0, 0, 0.13);
/* Shadow 6 — Y34, Blur 144, #56C596 alpha 21% (glow verde) */
--shadow-6: 0 34px 144px rgba(86, 197, 150, 0.21);
/* Aliases de uso comum */
--shadow-sm: var(--shadow-1);
--shadow: var(--shadow-2);
--shadow-md: var(--shadow-2);
--shadow-lg: var(--shadow-3);
/* ── ESPAÇAMENTO ────────────────────────────────────────────
─────────────────────────────────────────────────────────── */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
/* ── LAYOUT ─────────────────────────────────────────────────
─────────────────────────────────────────────────────────── */
--sidebar-w: 228px; /* Sidebar desktop */
--topbar-h: 52px; /* Topbar admin/desktop */
--tab-bar-h: 64px; /* Tab bar mobile (bottom nav do Figma) */
--screen-max: 430px; /* Largura máxima das telas mobile (Figma) */
--content-max: 1400px; /* Largura máxima de conteúdo admin/desktop */
/* ── CORES DE ROLE ──────────────────────────────────────────
Mantidas do sistema anterior para diferenciação de perfis
─────────────────────────────────────────────────────────── */
--role-admin: #8B5CF6;
--role-company: #0EA5E9;
--role-employee: var(--katui-green-mid);
--role-psi: #A855F7;
/* ── TOKENS DE COR HERDADOS ──────────────────────────────────
NÃO são legado morto: admin-dashboard.html carrega só tokens.css
+ components.css (sem style.css/override próprio), então consome
estes valores diretamente. Revisado 2026-07-05 — "remover após
Onda 1" nunca foi seguro porque Onda 1-3 nunca deram um arquivo
de override de cor ao admin. Não remover sem antes dar a
admin-dashboard.html sua própria fonte de tokens.
`--primary-light`/`--primary-dim`/`--primary-glow`/`--info`(-dim)
têm valor DIFERENTE em style.css (override intencional do app —
ver comentário lá) — divergência esperada entre portais, não bug.
─────────────────────────────────────────────────────────── */
--primary: var(--wordmark-green);
--primary-light: var(--katui-teal-mid);
--primary-dark: var(--wordmark-green-dark);
--primary-dim: rgba(50, 157, 156, 0.15);
--primary-glow: rgba(50, 157, 156, 0.22);
--accent: var(--katui-green-mid);
--ink: var(--katui-navy);
/* ── STATUS ACCENT (ADR 0001 — 2026-07-16) ───────────────────
border-left colorido é convenção do app para status-accent (cycle,
psi-level, blocked). Tokens abaixo declaram width/style; cor vem
dos tokens semânticos (--success, --warning, --error, --info,
--cyan-500, --rose-500). Ver docs/adr/0001-border-left-status-accent.md.
─────────────────────────────────────────────────────────── */
--status-accent-border-width: 3px; /* default 3px, 4-6px permitido em cards highlighted */
--status-accent-border-style: solid; /* sempre solid */
/* ── GRAY SCALE (Tailwind, neutral muted) ────────────────────
Para texto neutro muted em contextos não-brand. Diferente de
--muted (#326256) que é teal-tinted. Use --gray-* quando o
contexto não é "voz Katui" (ex: placeholders em inputs de filtro,
texto secundário em charts).
─────────────────────────────────────────────────────────── */
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-300: #D1D5DB;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;
/* ── TAILWIND-PALETTE COMPLEMENTS ─────────────────────────────
Cores Tailwind que vazaram no app antes do drift cleanup. São
distintas dos tokens semânticos da paleta Katui (--error vs
--red-500, --success vs --emerald-500). Mantidas como aliases pra
snap retroativo de código legado sem refator visual.
─────────────────────────────────────────────────────────── */
--red-500: #EF4444; /* Tailwind red-500 — danger genérico */
--emerald-500: #10B981; /* Tailwind emerald-500 — success genérico */
--green-500: #22C55E; /* Tailwind green-500 */
--green-600: #16A34A; /* Tailwind green-600 */
--green-400: #4ADE80; /* Tailwind green-400 — texto de sucesso sobre bg tinted */
--sage-mid: #84A687; /* custom green que apareceu em 6 ocorrências (dashboard cards) */
/* ── PR-2.8 (token migration) — Escala de raio completa ─────────
Adiciona os 6 raios documentados em DESIGN.md e .impeccable/design.json
que faltavam em tokens.css. A escala `--radius-*` está reconciliada
com o changelog de 2026-07-15 (100 border-radius fora da escala → 6
oficiais). Os tokens legados `--gray-*` e Tailwind-palette
(`--red-500`/`--green-*`/`--emerald-500`/`--sage-mid`) foram
MIGRADOS em app.js (PR-2.8) e permanecem como alias deprecated
com nota de remoção em F5 (fechamento do refactor V3).
─────────────────────────────────────────────────────────────── */
--radius-hero: 24px; /* hero/illustration elements (6 ocorrências) */
--radius-card-flow: 14px; /* cards no .q-* (questionário, 15 ocorrências) */
--radius-btn: 10px; /* alguns botões/inputs (25 ocorrências) */
--radius-chip: 6px; /* small chips/badges (22 ocorrências) */
--radius-tag: 4px; /* subtle tags, kbd (15 ocorrências) */
--radius-accent: 3px; /* tiny accents (4 ocorrências) */
/* ── PR-2.8 — Motion tokens (easing + duration) ──────────────
Adiciona os tokens de motion documentados em .impeccable/design.json
e ADR do `impeccable motion` (ease-out-quart, 150-250ms). Hoje estão
hardcoded em ~30+ transições de componentes (`transition: ... 150ms`
e `cubic-bezier(0.4, 0, 0.2, 1)` direto). Usar nomes semânticos
evita drift entre 8+ estilos de transition que o detector encontrou.
─────────────────────────────────────────────────────────────── */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard — default */
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); /* UI reveal — exit */
--duration-fast: 150ms; /* hover, focus, small state changes */
--duration-normal: 250ms; /* modal open/close, slide-ins */
--duration-slow: 350ms; /* Tui mascot reveals (respect prefers-reduced-motion) */
/* ── PR-2.8 — Breakpoint tokens ─────────────────────────────
5 breakpoints sincronizados com .impeccable/design.json. Antes
hardcoded em ~20 media queries (`@media (max-width: 768px)`, etc).
Hoje os valores batem com Tailwind defaults (sm 640, md 768, lg 1024,
xl 1280, 2xl 1536) — é o vocabulário canônico do ecossistema.
─────────────────────────────────────────────────────────────── */
--breakpoint-sm: 640px; /* Mobile landscape, small tablets */
--breakpoint-md: 768px; /* Tablet portrait */
--breakpoint-lg: 1024px; /* Tablet landscape, small desktop */
--breakpoint-xl: 1280px; /* Standard desktop */
--breakpoint-2xl: 1536px; /* Large desktop */
/* ── PR-2.9 — Breakpoint xs (narrow mobile) + safe-area tokens ─────────
--breakpoint-xs: 480px — iPhone SE / small Android (≤ 480px). Auditado
em 2026-07-30: 6 media queries em style.css/admin-dashboard.html
usavam `max-width: 480px` hardcoded. 480 está abaixo do sm canônico
do Tailwind (640), mas é o ponto natural onde o iPhone SE e
dispositivos similares quebram layouts de 2 colunas.
--safe-area-*: wrappers de env(safe-area-inset-*) para iOS notch /
home indicator. Usar em `padding-top: var(--safe-area-top)` em vez
de `padding-top: env(safe-area-inset-top, 0px)` direto — facilita
override em testes / Storybook e padroniza fallback 0px.
─────────────────────────────────────────────────────────────── */
--breakpoint-xs: 480px; /* Narrow mobile (iPhone SE, ≤480px) */
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-right: env(safe-area-inset-right, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
--safe-area-left: env(safe-area-inset-left, 0px);
}