/* ============================================================ Clarix — Tokens de Design ---- Fonte ÚNICA de verdade para cor, espaço, raio, sombra, tipografia, camadas z-index e transições. Nenhum outro arquivo CSS deve declarar `--clx-*` ou `--status-*` — todos consomem daqui. Histórico: Sessão 58 (F-01) — criação inicial (brand + status + neutros + raios + sombras + fonte) Sessão 62.D — extensão para Design System (Onda 2 do AUDIT.md): · paleta semântica em shades (100/300/500/700) · escala tipográfica (xs .. 3xl) · escala de espaçamento (0 .. 12, base 4px) · camadas z-index (dropdown/sticky/modal/toast/tooltip) · transições padrão (fast/base/slow) · namespace `--clx-*` (novo); `--clarix-*`/`--status-*` legados mantidos para compat com auth.css / recepcao.css / wizard-agendamento.css Convenção de namespace: --clarix-* → herdado da 58, ainda consumido por auth.css e partials legados. --status-* → herdado da 58, consumido por recepcao.css para badges. --clx-* → novo (62.D), usado pelos componentes `.clx-btn`/`.clx-modal`/etc. Nenhum dos três é descontinuado em 62.D; 62.E + 62.F decidem consolidação. Dark mode: em 62.D reservamos o seletor `[data-theme="dark"]` como placeholder comentado. A ativação/override de tokens para dark fica para 62.F (a11y + dark mode). ============================================================ */ :root { /* ────────────────────────────────────────────────────────── */ /* MARCA — Clarix (navy + cyan + roxo de acento) */ /* ────────────────────────────────────────────────────────── */ --clarix-navy: #0B1F4A; --clarix-navy-2: #162d60; --clarix-navy-3: #1a3a6e; --clarix-cyan: #00B8D9; --clarix-cyan-ink: #0277A6; --clarix-purple: #6c5ce7; /* Aliases sem prefixo `clarix-` para uso dentro de componentes clx-* */ --clx-brand: var(--clarix-navy); --clx-brand-ink: #ffffff; /* texto sobre brand */ --clx-accent: var(--clarix-cyan); --clx-accent-ink: #053447; /* texto sobre accent */ /* ────────────────────────────────────────────────────────── */ /* PALETA SEMÂNTICA — shades 100/300/500/700 */ /* 100 → fundo suave (chips, alerts leves) */ /* 300 → borda / outline */ /* 500 → elemento saturado (botão danger, ícone, texto em */ /* fundo claro) */ /* 700 → texto acessível sobre shade 100 (contraste AA) */ /* ────────────────────────────────────────────────────────── */ /* Info (azul) */ --clx-info-100: #dbeafe; --clx-info-300: #93c5fd; --clx-info-500: #3b82f6; --clx-info-700: #1e40af; /* Success (verde) */ --clx-success-100: #d1fae5; --clx-success-300: #6ee7b7; --clx-success-500: #10b981; --clx-success-700: #065f46; /* Warning (âmbar) */ --clx-warn-100: #fef3c7; --clx-warn-300: #fcd34d; --clx-warn-500: #f59e0b; --clx-warn-700: #92400e; /* Danger (vermelho) */ --clx-danger-100: #fee2e2; --clx-danger-300: #fca5a5; --clx-danger-500: #ef4444; --clx-danger-700: #991b1b; /* Neutral (cinza-azulado) */ --clx-neutral-100: #f1f5f9; --clx-neutral-300: #cbd5e1; --clx-neutral-500: #64748b; --clx-neutral-700: #334155; /* ────────────────────────────────────────────────────────── */ /* STATUS (legado — mantido para compat da 58 em auth.css, */ /* recepcao.css, wizard-agendamento.css). Em 62.E serão */ /* progressivamente trocados por --clx-{semantic}-100/700. */ /* ────────────────────────────────────────────────────────── */ --status-info-bg: var(--clx-info-100); --status-info-fg: var(--clx-info-700); --status-warn-bg: var(--clx-warn-100); --status-warn-fg: var(--clx-warn-700); --status-success-bg: var(--clx-success-100); --status-success-fg: var(--clx-success-700); --status-purple-bg: #ede9fe; --status-purple-fg: #5b21b6; --status-orange-bg: #fff7ed; --status-orange-fg: #c2410c; --status-neutral-bg: var(--clx-neutral-100); --status-neutral-fg: var(--clx-neutral-500); --status-error-bg: var(--clx-danger-100); --status-error-fg: var(--clx-danger-700); /* ────────────────────────────────────────────────────────── */ /* NEUTROS (texto, superfícies, bordas) */ /* ────────────────────────────────────────────────────────── */ --text: #0b2545; --text-2: #334e68; --muted: #64748b; --muted-2: #94a3b8; --border: #e2e8f0; --border-2: #cbd5e1; --app-bg: #f0f4f8; --surface: #ffffff; --surface-2: #fbfdff; /* Aliases `clx-*` */ --clx-text: var(--text); --clx-text-muted: var(--muted); --clx-text-faint: var(--muted-2); --clx-border: var(--border); --clx-border-hover:var(--border-2); --clx-surface: var(--surface); --clx-surface-alt: var(--surface-2); --clx-bg: var(--app-bg); /* ────────────────────────────────────────────────────────── */ /* RAIOS */ /* ────────────────────────────────────────────────────────── */ --radius-sm: .35rem; --radius: .5rem; --radius-md: .6rem; --radius-lg: 1rem; --clx-radius-sm: var(--radius-sm); --clx-radius-md: var(--radius); /* default para cards/botões */ --clx-radius-lg: var(--radius-lg); --clx-radius-pill: 9999px; /* ────────────────────────────────────────────────────────── */ /* SOMBRAS */ /* ────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,.07); --shadow: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 10px 30px rgba(0,0,0,.18); --clx-shadow-sm: var(--shadow-sm); --clx-shadow-md: var(--shadow); --clx-shadow-lg: var(--shadow-lg); /* Anel cyan ampliado de 28% → 45% em 62.F.1: sobre fundos saturados (botões primary, sidebar ativa, surface-alt) a opacidade mais baixa ficava abaixo do threshold visual WCAG 2.4.7 "Focus Visible". */ --clx-shadow-focus:0 0 0 3px rgba(0, 184, 217, .45); /* anel cyan */ /* ────────────────────────────────────────────────────────── */ /* TIPOGRAFIA — família + escala */ /* Base: 16px (1rem). Escala type em rem para respeitar */ /* preferência de acessibilidade do browser. */ /* ────────────────────────────────────────────────────────── */ --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --clx-font-sans: var(--font-sans); --clx-font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace; --clx-fs-xs: .72rem; /* 11.5px - micro labels */ --clx-fs-sm: .82rem; /* 13.1px - helper text, badges */ --clx-fs-base: 1rem; /* 16px - body default */ --clx-fs-lg: 1.13rem; /* 18.1px - subtítulos */ --clx-fs-xl: 1.31rem; /* 21px - títulos de card */ --clx-fs-2xl: 1.63rem; /* 26px - títulos de seção */ --clx-fs-3xl: 2rem; /* 32px - heros */ --clx-fw-regular: 400; --clx-fw-medium: 500; --clx-fw-semi: 600; --clx-fw-bold: 700; --clx-lh-tight: 1.2; /* títulos */ --clx-lh-base: 1.5; /* body */ --clx-lh-relaxed: 1.65; /* texto longo */ /* ────────────────────────────────────────────────────────── */ /* ESPAÇAMENTO — escala 0..12, base 4px (0.25rem). */ /* Uso em padding/margin/gap de componentes clx-*. */ /* ────────────────────────────────────────────────────────── */ --clx-space-0: 0; --clx-space-0-5: .125rem; /* 2px */ --clx-space-1: .25rem; /* 4px */ --clx-space-1-5: .375rem; /* 6px */ --clx-space-2: .5rem; /* 8px */ --clx-space-3: .75rem; /* 12px */ --clx-space-4: 1rem; /* 16px */ --clx-space-5: 1.25rem; /* 20px */ --clx-space-6: 1.5rem; /* 24px */ --clx-space-8: 2rem; /* 32px */ --clx-space-10: 2.5rem; /* 40px */ --clx-space-12: 3rem; /* 48px */ /* ────────────────────────────────────────────────────────── */ /* Z-INDEX — camadas padronizadas */ /* Valores esparsos para permitir insertions futuras. */ /* ────────────────────────────────────────────────────────── */ --clx-z-base: 0; --clx-z-raised: 10; /* elementos com sombra, sticky cards */ --clx-z-dropdown: 100; /* autocomplete, menu drop */ --clx-z-sticky: 200; /* headers fixos, topbar */ --clx-z-backdrop: 900; /* overlay escuro de modal/fila */ --clx-z-modal: 1000; /* painel de modal */ --clx-z-toast: 1080; /* toasts (fica acima de modal — feedback não desaparece) */ --clx-z-tooltip: 1100; /* tooltips (acima de tudo) */ /* ────────────────────────────────────────────────────────── */ /* TRANSIÇÕES — durações + easings padrão */ /* ────────────────────────────────────────────────────────── */ --clx-dur-fast: 120ms; --clx-dur-base: 200ms; --clx-dur-slow: 320ms; --clx-ease: cubic-bezier(.2, .7, .2, 1); /* default - suave out */ --clx-ease-in: cubic-bezier(.4, 0, 1, 1); /* acelerar */ --clx-ease-out: cubic-bezier(0, 0, .2, 1); /* desacelerar */ --clx-ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* pop leve em modais */ /* Shortcuts comuns */ --clx-tx-fast: all var(--clx-dur-fast) var(--clx-ease); --clx-tx-base: all var(--clx-dur-base) var(--clx-ease); /* ────────────────────────────────────────────────────────── */ /* BREAKPOINTS (Sessão 62.F.4 — U11) */ /* CSS `var()` NÃO funciona dentro de `@media (max-width:)` */ /* — os valores continuam literais em cada `@media`. Estes */ /* tokens servem para (a) contrato documentado com reviewers*/ /* e designers, (b) leitura via JS */ /* (`getComputedStyle(document.documentElement) */ /* .getPropertyValue('--clx-bp-md')`), (c) container */ /* queries futuras quando o suporte estabilizar. */ /* */ /* CONVENÇÃO: cada `@media` deve ter comentário `/* bp-md *\/` */ /* na mesma linha apontando para qual token se refere. */ /* ────────────────────────────────────────────────────────── */ --clx-bp-sm: 640px; /* celular vertical */ --clx-bp-md: 900px; /* tablet / celular horizontal */ --clx-bp-lg: 1200px; /* notebook */ --clx-bp-xl: 1600px; /* monitor grande (radiologia) */ /* ────────────────────────────────────────────────────────── */ /* LEGACY CENTRAL DO DIA ALIASES (Sessão 62.F.4 — U1 purge) */ /* Migrados de `recepcao.css` para satisfazer a regra */ /* "nenhum arquivo além de `clarix-tokens.css` declara */ /* tokens CSS". Mantidos com os mesmos valores/estrutura */ /* para preservar 100% da aparência pós-62.F.2 sem */ /* regressão visual. */ /* */ /* DEPRECATED: estes aliases serão progressivamente */ /* substituídos por tokens globais (`--clx-*` / `--surface` */ /* / `--border` / shades semânticas 100/500/700) em sessão */ /* futura dedicada. Novos CSS/HTML NÃO devem consumir */ /* `--cent-*` — usar diretamente os tokens globais. */ /* */ /* Dark mode: os `--cent-*` que consomem `var(--X, fallback)` */ /* já flipam automaticamente via overrides de `--surface`/ */ /* `--border`/`--text` em `html[data-theme="dark"]`. Os */ /* valores hex diretos (`--cent-success`, `--cent-warn`, */ /* `--cent-danger`, `--cent-urgent`) são cobertos por */ /* overrides a nível de classe em `recepcao.css`. */ /* ────────────────────────────────────────────────────────── */ --cent-navy: var(--clarix-navy, #0b2545); --cent-cyan: var(--clarix-cyan, #00b4d8); --cent-cyan-ink: var(--clarix-cyan-ink, #0096b8); --cent-bg: var(--app-bg, #f5f7fb); --cent-surface: var(--surface, #ffffff); --cent-surface-2: var(--surface-2, #fbfcfe); --cent-border: var(--border, #e3e7ef); --cent-border-2: var(--border-2, #cfd6e2); --cent-ink: var(--text, #1b2638); --cent-ink-2: var(--text-2, #4a5568); --cent-muted: var(--muted, #8796ab); --cent-success: #10b981; --cent-success-bg: #ecfdf5; --cent-warn: #f59e0b; --cent-warn-bg: #fffbeb; --cent-danger: #e11d48; --cent-danger-bg: #fff1f2; --cent-urgent: #dc2626; --cent-radius: .5rem; --cent-radius-sm: .35rem; --cent-shadow-sm: 0 1px 2px rgba(11,37,69,.06), 0 1px 3px rgba(11,37,69,.04); --cent-shadow: 0 4px 12px rgba(11,37,69,.08), 0 2px 4px rgba(11,37,69,.04); } /* ============================================================ DARK MODE (Sessão 62.F.2) ---- Ativado via `html[data-theme="dark"]` — seletor aplicado pelo `clarix-theme.js` (anti-flash inline no + toggle no topbar). Default do armazenamento: "auto" (respeita prefers-color-scheme). Estratégia: - Neutros invertidos (app-bg escuro, superfícies saturadas). - Semantic shades: 100 vira fundo escuro saturado da cor correspondente; 700 vira texto claro saturado. Mantém a mesma lógica "100=bg suave / 700=texto acessível sobre 100" — os consumidores não precisam mudar. - Sombras com rgba(0,0,0,.5) (depth em fundo escuro). - Focus ring em cyan mais brilhante (#22d3ee) com alpha maior. - `color-scheme: dark` para form controls nativos e scrollbars seguirem o tema. Contraste AA (texto ≥ 4.5:1, UI ≥ 3:1) validado nas 5 views-alvo da 62.F.1 (/Recepcao, /Agendamento/NovoWizard, /Laudo/Editar, /Estudo/Details, /Convenio) + auth (Login + SelecionarTenant). ============================================================ */ html[data-theme="dark"] { color-scheme: dark; /* ── Brand aliases (marca intacta, ajuste sutil no accent) ── */ --clarix-navy: #0B1F4A; /* mantido — brand identity */ --clarix-navy-2: #162d60; --clarix-navy-3: #1a3a6e; --clarix-cyan: #22d3ee; /* cyan levemente mais brilhante em dark */ --clarix-cyan-ink: #053447; --clx-brand: #1a3a6e; /* navy mais claro para contraste com bg dark */ --clx-brand-ink: #e5eaf4; --clx-accent: #22d3ee; --clx-accent-ink: #04252f; /* ── Semantic shades — 100=bg escuro saturado, 700=texto claro saturado ── */ /* Info (azul) */ --clx-info-100: #0c2645; --clx-info-300: #1e3a63; --clx-info-500: #60a5fa; --clx-info-700: #bfdbfe; /* Success (verde) */ --clx-success-100: #0e2e20; --clx-success-300: #165339; --clx-success-500: #34d399; --clx-success-700: #a7f3d0; /* Warning (âmbar) */ --clx-warn-100: #2a1d06; --clx-warn-300: #5a3d0d; --clx-warn-500: #fbbf24; --clx-warn-700: #fde68a; /* Danger (vermelho) */ --clx-danger-100: #2a0e12; --clx-danger-300: #56191f; --clx-danger-500: #f87171; --clx-danger-700: #fecaca; /* Neutral (cinza-azulado) */ --clx-neutral-100: #1e293b; --clx-neutral-300: #334155; --clx-neutral-500: #94a3b8; --clx-neutral-700: #cbd5e1; /* Legacy --status-* — repipar explicitamente (não herdam automaticamente) */ --status-info-bg: var(--clx-info-100); --status-info-fg: var(--clx-info-700); --status-warn-bg: var(--clx-warn-100); --status-warn-fg: var(--clx-warn-700); --status-success-bg: var(--clx-success-100); --status-success-fg: var(--clx-success-700); --status-purple-bg: #2a1e4d; --status-purple-fg: #ddd0ff; --status-orange-bg: #2d1b0a; --status-orange-fg: #fed7aa; --status-neutral-bg: var(--clx-neutral-100); --status-neutral-fg: var(--clx-neutral-700); --status-error-bg: var(--clx-danger-100); --status-error-fg: var(--clx-danger-700); /* ── Neutros (texto + superfícies + bordas) ── */ --text: #e5eaf4; --text-2: #b8c3d9; --muted: #94a3b8; --muted-2: #64748b; --border: #27324d; --border-2: #3a4668; --app-bg: #0b1325; --surface: #111b33; --surface-2: #18254a; --elevated: #1d2c55; /* Aliases novos */ --clx-text: var(--text); --clx-text-muted: var(--muted); --clx-surface: var(--surface); --clx-surface-alt: var(--surface-2); --clx-border: var(--border); --clx-border-hover: var(--border-2); --clx-bg: var(--app-bg); /* ── Sombras — rgba(0,0,0) intensificadas para depth em dark ── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 16px rgba(0, 0, 0, .6); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .65); --clx-shadow-xs: 0 1px 2px rgba(0, 0, 0, .5); --clx-shadow-sm: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .35); --clx-shadow-md: 0 4px 12px rgba(0, 0, 0, .6); --clx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .65); --clx-shadow-focus: 0 0 0 3px rgba(34, 211, 238, .55); } /* ============================================================ Utilitários globais (poucos, semânticos — existentes da 58) ============================================================ */ .text-navy { color: var(--clarix-navy) !important; } .text-cyan { color: var(--clarix-cyan) !important; } .text-muted-2 { color: var(--muted-2) !important; } .bg-app { background-color: var(--app-bg) !important; } /* Wordmark Cla*rix* — uso em topbar, login, footer */ .clarix-wordmark { font-weight: 700; letter-spacing: -.4px; color: var(--clarix-navy); } .clarix-wordmark > span { color: var(--clarix-cyan); } .clarix-wordmark.on-dark { color: #fff; } .clarix-wordmark.on-dark > span { color: var(--clarix-cyan); }