/* ========================================================================== Design System UNIFICADO — Credito × H3aven ========================================================================== Regra 1: Esta é a ÚNICA fonte de verdade. tokens.ts e palette.ts são gerados a partir daqui. Regra 2: Semânticos só referenciam primitivos. Componentes só referenciam semânticos. Regra 3: Nenhum hex em código de componente. Nenhum px avulso. Regra 4 (SELAMENTO): as FUNDAÇÕES (spacing, type scale, leading, weights, tracking, radius, depth, motion) são brand-agnostic e SELADAS — mudá-las exige entrada no Changelog + `python3 tools/contrast_check.py` verde. Marcas novas só preenchem os slots semânticos; nunca criam token estrutural próprio. Regra 5 (MARCAS): a marca é selecionada por atributo no : (default / data-brand="credito") → verde Sicredi, EB Garamond/Fraunces data-brand="h3aven" → escala P&B acromática, acento azul aço, vinho crítico, Mrs Eaves Combinável com data-theme="light|dark". Logo H3aven: SOMENTE as versões mono (brand/logo-h3aven-{black,white}.png) — branca sobre superfície escura, preta sobre clara. O gradiente rainbow do logo original está DESCONTINUADO no DS. ========================================================================== */ /* --- 0. FONTES DA MARCA H3AVEN — Mrs Eaves (local, project/fonts/) --------- */ @font-face { font-family: 'Mrs Eaves'; src: url('fonts/mrs-eaves/mrs-eaves-lining.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Mrs Eaves OS'; /* oldstyle figures — uso editorial */ src: url('fonts/mrs-eaves/mrs-eaves-ot.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Mrs Eaves XL'; src: url('fonts/mrs-eaves/mrs-eaves-xl.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Mrs Eaves XL'; src: url('fonts/mrs-eaves/mrs-eaves-xl-heavy.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Mrs Eaves XL Narrow'; src: url('fonts/mrs-eaves/mrs-eaves-xl-narrow.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Mrs Eaves XL Narrow'; src: url('fonts/mrs-eaves/mrs-eaves-xl-narrow-heavy.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Mrs Eaves Small Caps'; src: url('fonts/mrs-eaves/mrs-eaves-small-caps.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Mrs Eaves Petite Caps'; src: url('fonts/mrs-eaves/mrs-eaves-petite-caps.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } /* --- 1. PRIMITIVOS (FUNDAÇÕES SELADAS + marca default Credito) ------------- */ :root { /* Verde Sicredi — eixo único de marca, tonalizado para light/dark */ --verde-50: oklch(97.5% 0.020 142); --verde-100: oklch(94% 0.045 142); --verde-200: oklch(87% 0.085 142); --verde-300: oklch(78% 0.130 142); --verde-400: oklch(70% 0.160 142); --verde-500: oklch(62% 0.170 142); /* #43B02A — marca */ --verde-600: oklch(54% 0.155 142); --verde-700: oklch(46% 0.135 142); --verde-800: oklch(36% 0.105 142); --verde-900: oklch(26% 0.072 142); /* Neutros tonalizados com traço verde (hue 142, chroma ≤ 0.015) */ --neutral-0: oklch(100% 0 0); --neutral-25: oklch(99% 0.004 142); --neutral-50: oklch(98% 0.006 142); --neutral-100: oklch(96% 0.009 142); --neutral-200: oklch(92% 0.012 142); --neutral-300: oklch(85% 0.014 142); --neutral-400: oklch(70% 0.012 142); --neutral-500: oklch(55% 0.010 142); --neutral-600: oklch(42% 0.012 142); --neutral-700: oklch(32% 0.014 142); --neutral-800: oklch(22% 0.012 142); --neutral-900: oklch(14% 0.010 142); /* Acentos funcionais — chroma 0.17 fixo, hue varia */ --amber-500: oklch(80% 0.17 85); /* warning */ --magenta-500: oklch(58% 0.22 15); /* danger */ --cyan-500: oklch(72% 0.12 220); /* info */ --violet-500: oklch(58% 0.17 295); /* neutro categoria */ /* --- Espaçamento: base 4px, escala geométrica ------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Section rhythm (DS-PREMIUM-004): Tier S desktop range is 80-128px between major sections (Stripe 64+, Linear 96, Vercel 80-120, Mastercard 96-128, Apple 80). Use --space-9 for default desktop section gap and --space-10 for editorial/report opener gaps. */ --space-9: 96px; /* section gap — desktop default */ --space-10: 128px; /* hero / editorial section gap */ /* --- Tipografia: escala 6 stops TRAVADA + EB Garamond como serif body -- Decisão DS-PREMIUM-A11Y para audiência 60+: serif clássico (EB Garamond) em body lê melhor que sans em paragrafos longos (relatório); UI chrome mantém peso variável para presença. Fraunces (display) traz contraste italic op-size ao hero. Inter foi candidato; EB Garamond ganhou na calibração de legibilidade contínua para 60+. */ --font-sans: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; --font-display: 'Fraunces', 'IBM Plex Serif', Georgia, serif; --font-brand: 'Libre Baskerville', Georgia, serif; --font-report-serif: 'EB Garamond', Georgia, 'Times New Roman', serif; /* UI sans-serif — botões, controls, chrome de formulário. Distingue do body serif (EB Garamond) e do mono (Plex). System stack: SF Pro no macOS, Segoe UI no Windows, Roboto no Android — fontes nativas afinadas para legibilidade UI, sem custo de download. */ --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Alias selado: hero SEMPRE aponta para o display da marca ativa. Credito → Fraunces; H3aven → Mrs Eaves (substitui Fraunces no papel display para H3aven — decisão 2026-08-18, ver Changelog). */ --font-hero: var(--font-display); /* Type scale (DS-PREMIUM-A11Y-V2): global +1 stop bump for 60+ audience. Was 12/14/16/20/28/40 — calibrated for younger users on dense dashboards. Now 14/16/18/24/32/48 — every label, button, body paragraph, subtitle, section title, and hero is comfortably readable for older eyes without squinting. UI density slightly relaxes (intentional). */ --text-xs: 14px; /* legendas, metadados (was 12px) */ --text-sm: 16px; /* UI padrão (was 14px) */ --text-base: 18px; /* corpo de leitura (was 16px) */ --text-md: 24px; /* subtítulos (was 20px) */ --text-lg: 32px; /* título de seção (was 28px) */ --text-xl: 48px; /* hero, KPI value (was 40px) */ /* Leading (DS-PREMIUM-A11Y): bumped for 60+ legibility — older eyes read more comfortably with looser line-spacing. */ --leading-tight: 1.25; --leading-normal: 1.6; --leading-loose: 1.8; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* Sub-step body weight (DS-PREMIUM-A11Y revision): public 60+ requires legibility over light-touch elegance. Was 425 (sub-light, premium-magazine feel); revised to 475 — still a sub-step refinement, but biased toward medium (500) for definitively-readable strokes on older eyes. Mastercard runs body 450, this leans 50% heavier than that. */ --weight-soft: 475; /* --- Letter-spacing tokens (DS-PREMIUM-A11Y revision) ---------------- Originally -0.03/-0.02/-0.01em (Tier S consensus). Halved for 60+ audience: aggressive negative tracking is harder for older eyes to parse word boundaries. Premium feel preserved (still tighter than neutral) without sacrificing legibility. */ --tracking-tighter: -0.015em; /* h1 / hero / --text-xl (40px) */ --tracking-tight: -0.01em; /* h2 / .ds-h2 / section openers */ --tracking-snug: -0.005em; /* h3 / .ds-h3 / .ds-h2 sub-display */ --tracking-normal: 0; /* body, default */ --tracking-eyebrow: 0.04em; /* uppercase eyebrow labels */ /* --- Forma ------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-full: 999px; /* --- Depth: border-first, sombra só para overlay --------------------- DS-PREMIUM-A11Y revision: opacities bumped (6→8 / 10→14 / 18→22%) so card edges and dividers are clearly visible to 60+ eyes. Older sight loses contrast sensitivity; barely-there borders disappear entirely. */ --border-hairline: 1px solid color-mix(in oklab, var(--neutral-900) 8%, transparent); --border-subtle: 1px solid color-mix(in oklab, var(--neutral-900) 14%, transparent); --border-strong: 1px solid color-mix(in oklab, var(--neutral-900) 22%, transparent); /* Multi-layer elevation (DS-PREMIUM-A11Y revision): close drop + ambient depth + reduced top-edge inner highlight. Was 80% white inset (premium "lit-from-above"); now 40% — visible enough to register as elevation without creating a bright pixel-line that 60+ readers may misread as a UI artifact. Close-shadow opacity also bumped (5→8%) so cards have clearer ground-shadow boundary against the warm canvas. */ --shadow-card: 0 1px 3px color-mix(in oklab, var(--neutral-900) 8%, transparent), 0 4px 8px -2px color-mix(in oklab, var(--neutral-900) 5%, transparent), inset 0 1px 0 color-mix(in oklab, var(--neutral-0) 40%, transparent); --shadow-raised: 0 2px 4px color-mix(in oklab, var(--neutral-900) 8%, transparent), 0 8px 16px -4px color-mix(in oklab, var(--neutral-900) 7%, transparent), 0 16px 32px -12px color-mix(in oklab, var(--neutral-900) 6%, transparent), inset 0 1px 0 color-mix(in oklab, var(--neutral-0) 40%, transparent); --shadow-overlay: 0 4px 8px -2px color-mix(in oklab, var(--neutral-900) 8%, transparent), 0 16px 32px -8px color-mix(in oklab, var(--neutral-900) 12%, transparent), 0 32px 64px -16px color-mix(in oklab, var(--neutral-900) 10%, transparent), inset 0 1px 0 color-mix(in oklab, var(--neutral-0) 40%, transparent); /* --- Motion ---------------------------------------------------------- */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* Motion utility tokens (DS-PREMIUM-008): calmer, slower curves designed for 60+ audience. --ease-calm has zero overshoot (no spring), gentler than --ease-out. --motion-section is for major reveals (accordion opens, page transitions) — feels deliberate, not snappy. Stagger step stays small (50ms) so multi-child reveals feel coordinated, not delayed. */ --ease-calm: cubic-bezier(0.22, 1, 0.36, 1); --motion-section: 400ms; --motion-stagger-step: 50ms; /* === Motion scale (Polish.html — auditoria técnico-artística) ============ Aditivo. Mantém --motion-* / --ease-* legacy. Polish exigia 7 durations + 9 easings nomeados. --e-anticipate INTENCIONALMENTE OMITIDO em produção — overshoot 1.6 + curva anti incompatível com calibre 60+; fica disponível apenas no doc Polish.html. */ --d-instant: 80ms; /* press, ripple, mouse-down feedback */ --d-fast: 120ms; /* hover, focus em UI (= --motion-fast) */ --d-quick: 180ms; /* enter/exit pequenos */ --d-base: 240ms; /* default — transições de estado */ --d-medium: 320ms; /* tab change, panel slide (= --motion-slow) */ --d-slow: 480ms; /* page transition, modal */ --d-cinematic: 720ms; /* hero, reveals editoriais, scrub */ --e-linear: linear; --e-out: cubic-bezier(0.22, 1, 0.36, 1); /* = --ease-calm; UI default */ --e-out-soft: cubic-bezier(0.16, 1, 0.3, 1); /* Apple emphasized; cinematic */ --e-in: cubic-bezier(0.7, 0, 0.84, 0); /* exit — usar com parcimônia */ --e-inout: cubic-bezier(0.65, 0, 0.35, 1); /* viajar de A→B */ --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* press release; overshoot moderado */ --e-spring-soft: cubic-bezier(0.5, 1.25, 0.5, 1); /* panel drop, attention */ --e-magnetic: cubic-bezier(0.2, 0.8, 0.2, 1); /* magnet hover */ /* Glow brand — focus halo padronizado (Polish princípio P-03 + P-08). 2px ring com bg-card por dentro (corta o foco do conteúdo) + 4px halo suave da marca por fora. Casa com --focus-ring legacy. */ --glow-brand: 0 0 0 2px var(--neutral-0), 0 0 0 4px color-mix(in oklab, var(--verde-500) 40%, transparent); /* === Editorial gradients — tonal ink ==================================== Single-hue vertical gradients usados em h1 do shell (#main-content h1) e títulos display. Substituem o gradiente diagonal multi-stop anterior (slate-900 → brand-hover → brand-primary @135deg, weight 800), que era legível como flourish de marketing/AI tell. O tonal-ink mantém a intenção editorial sem o ruído polychrome — lê como tinta-com-profundidade. Light: brand-primary 0% → brand-primary darkened 30% w/ neutral-900 100%. Dark: neutral-100 0% → mix(brand-primary 60%, neutral-100) 100%. */ --gradient-display-h1-light: linear-gradient(180deg, var(--verde-500) 0%, color-mix(in oklch, var(--verde-500) 70%, var(--neutral-900) 30%) 100%); --gradient-display-h1-dark: linear-gradient(180deg, var(--neutral-100) 0%, color-mix(in oklch, var(--verde-400) 60%, var(--neutral-100) 40%) 100%); /* === BorderLeft tier system ============================================ Regra canônica de profundidade do DS: faixa lateral esquerda como linguagem de hierarquia, NÃO como decoração de cor. Três tiers: PRIMARY (3px brand-primary): hero rows, decision cards, principal entity. Apenas brand-primary nesse peso — nunca status/rating/tone. Use quando o item É o foco do bloco. STATUS (2px status-*): só quando o status É a mensagem (alerta, restritivo, processo ativo, decisão aprovada). Cores limitadas a status-success / status-warning / status-danger. SUB (1px color-border-secondary): sub-rows, dimensional labels, list items dentro de cards. Neutro. Sem cor semântica. ANTI-PATTERN: 3px solid em cor arbitrária (rating-X, tone, accent dinâmico) empilhado em listas → confetti. Sempre demote a sub-tier a menos que o item se qualifique como primary ou status. */ --row-border-primary: 3px solid var(--brand-primary); --row-border-status-success: 2px solid var(--status-success); --row-border-status-warning: 2px solid var(--status-warning); --row-border-status-danger: 2px solid var(--status-danger); --row-border-sub: 1px solid var(--color-border-secondary, var(--border-default)); } /* --- 2. SEMÂNTICOS (light) ------------------------------------------------- */ :root, [data-theme="light"] { --bg-page: var(--neutral-50); --bg-card: var(--neutral-0); --bg-subtle: var(--neutral-100); --bg-elevated: var(--neutral-0); --bg-inverse: var(--neutral-900); /* Surface ladder (DS-PREMIUM-003a): formal 4-step elevation hierarchy. Linear-pattern naming. Light mode: lifts 2-4 share neutral-0 — depth comes from --shadow-card / --shadow-raised / --shadow-overlay paired with the lift level. Dark mode uses distinct neutrals per step. */ --bg-canvas: var(--neutral-50); /* page background (alias of --bg-page) */ --bg-lift-1: var(--neutral-25); /* sub-card / quietly raised region */ --bg-lift-2: var(--neutral-0); /* card surface (alias of --bg-card) */ --bg-lift-3: var(--neutral-0); /* elevated card — pair with --shadow-card */ --bg-lift-4: var(--neutral-0); /* modal / popover — pair with --shadow-overlay */ /* DS-PREMIUM-A11Y: secondary/tertiary text shifted darker for stronger contrast against the warm canvas. Was -600/-500; now -700/-600 — keeps hierarchical distinction (primary > secondary > tertiary) while pushing all three toward AAA contrast for 60+ readers. */ --text-primary: var(--neutral-900); --text-secondary: var(--neutral-700); --text-tertiary: var(--neutral-600); --text-inverse: var(--neutral-0); --text-brand: var(--verde-700); --border-default: var(--border-subtle); --border-focus: var(--verde-500); --brand-primary: var(--verde-500); --brand-hover: var(--verde-600); --brand-bg: var(--verde-50); --status-success: var(--verde-600); --status-success-bg: var(--verde-50); --status-warning: var(--amber-500); --status-warning-bg: oklch(97% 0.05 85); --status-danger: var(--magenta-500); --status-danger-bg: oklch(96% 0.04 15); --status-info: var(--cyan-500); --status-info-bg: oklch(96% 0.03 220); --status-neutral: var(--neutral-500); --status-neutral-bg: var(--neutral-100); /* Slot selado NOVO (unificação Credito×H3aven): canal crítico/destrutivo distinto do acento de marca. Credito mapeia no magenta funcional já existente; H3aven mapeia no vinho (vermelho escuro de marca). */ --accent-critical: var(--magenta-500); --accent-critical-bg: var(--status-danger-bg); /* Rating — escala perceptualmente uniforme, verde→vermelho */ --rating-AA: var(--verde-700); --rating-A: var(--verde-500); --rating-B: oklch(72% 0.16 115); --rating-C: var(--amber-500); --rating-D: oklch(65% 0.19 50); --rating-E: oklch(58% 0.21 30); --rating-F: var(--magenta-500); --rating-G: oklch(48% 0.20 15); --rating-H: oklch(38% 0.17 15); } /* --- 2b. SEMÂNTICOS (dark) ------------------------------------------------- */ [data-theme="dark"] { --bg-page: var(--neutral-900); --bg-card: var(--neutral-800); --bg-subtle: var(--neutral-800); --bg-elevated: oklch(26% 0.012 142); --bg-inverse: var(--neutral-0); /* Surface ladder (DS-PREMIUM-003a) — dark uses distinct neutrals per step (Linear's 4-step pattern translated to credito's verde axis). */ --bg-canvas: var(--neutral-900); /* page bg */ --bg-lift-1: oklch(18% 0.011 142); /* sub-card — between canvas and card */ --bg-lift-2: var(--neutral-800); /* card surface */ --bg-lift-3: oklch(26% 0.012 142); /* elevated (matches existing --bg-elevated) */ --bg-lift-4: oklch(30% 0.014 142); /* modal / popover — top of ladder */ --text-primary: var(--neutral-100); --text-secondary: var(--neutral-300); --text-tertiary: var(--neutral-400); --text-inverse: var(--neutral-900); --text-brand: var(--verde-300); --border-default: 1px solid color-mix(in oklab, var(--neutral-0) 10%, transparent); --border-focus: var(--verde-400); --brand-primary: var(--verde-400); --brand-hover: var(--verde-300); --brand-bg: color-mix(in oklab, var(--verde-500) 14%, transparent); --status-success: var(--verde-400); --status-success-bg: color-mix(in oklab, var(--verde-500) 14%, transparent); --status-warning-bg: color-mix(in oklab, var(--amber-500) 14%, transparent); --status-danger-bg: color-mix(in oklab, var(--magenta-500) 14%, transparent); --status-info-bg: color-mix(in oklab, var(--cyan-500) 14%, transparent); --status-neutral-bg: color-mix(in oklab, var(--neutral-0) 6%, transparent); /* Multi-layer dark elevation: pure-black drops + faint white inner highlight (~6% — reflected-light feel on dark surfaces). */ --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 4px 8px -2px rgba(0,0,0,0.25), inset 0 1px 0 color-mix(in oklab, var(--neutral-0) 6%, transparent); --shadow-raised: 0 2px 4px rgba(0,0,0,0.4), 0 8px 16px -4px rgba(0,0,0,0.4), 0 16px 32px -12px rgba(0,0,0,0.35), inset 0 1px 0 color-mix(in oklab, var(--neutral-0) 6%, transparent); --shadow-overlay: 0 4px 8px -2px rgba(0,0,0,0.5), 0 16px 32px -8px rgba(0,0,0,0.55), 0 32px 64px -16px rgba(0,0,0,0.5), inset 0 1px 0 color-mix(in oklab, var(--neutral-0) 6%, transparent); } /* --- 3. COMPONENTES (aliases, nunca valores crus) ------------------------- */ :root { --card-padding: var(--space-5); --card-radius: var(--radius-lg); --control-height-sm: 28px; --control-height-md: 36px; --control-height-lg: 44px; --control-radius: var(--radius-md); --navbar-height: 56px; --focus-ring: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--brand-primary); } /* ========================================================================== 4. MARCA H3AVEN — ========================================================================== Direção (2026-08-18): escala P&B acromática (chroma 0) como base; UM acento de marca (azul aço, hue 252) usado flat — nunca glow/gradiente decorativo; vinho (vermelho escuro, hue 22) como canal crítico/destrutivo e pontuação editorial rara. Sem magenta/roxo. Dark é a apresentação primária. Ratio 60-30-10: neutros dominam, superfícies secundárias, acento raro. Todos os pares fg/bg selados passam WCAG AA (ver tools/contrast_check.py). ========================================================================== */ /* --- 4a. PRIMITIVOS H3AVEN ------------------------------------------------- */ [data-brand="h3aven"] { /* Neutros acromáticos — chroma 0 puro. neutral-0/1000 são TINTA (logo, texto sobre acento); superfícies usam 10..950 (nunca branco/preto puros). */ --neutral-0: oklch(100% 0 0); --neutral-10: oklch(99.2% 0 0); /* card light — off-white */ --neutral-25: oklch(98.5% 0 0); --neutral-50: oklch(97.5% 0 0); --neutral-100: oklch(95% 0 0); --neutral-200: oklch(91% 0 0); --neutral-300: oklch(84% 0 0); --neutral-400: oklch(70% 0 0); --neutral-500: oklch(55% 0 0); --neutral-600: oklch(44% 0 0); --neutral-700: oklch(34% 0 0); --neutral-800: oklch(24.5% 0 0); --neutral-850: oklch(22.5% 0 0); --neutral-900: oklch(19% 0 0); --neutral-925: oklch(16.5% 0 0); --neutral-950: oklch(14.5% 0 0); /* canvas dark — off-black #0A0A0A */ --neutral-1000: oklch(0% 0 0); /* Azul aço — acento único de marca (hue 252). Uso flat: texto, borda, fill. Proibido: outer-glow, gradiente neon, wash decorativo. */ --azul-50: oklch(97% 0.015 252); --azul-100: oklch(94% 0.030 252); --azul-200: oklch(86% 0.075 252); --azul-300: oklch(76% 0.115 252); /* acento dark-mode — chroma mantido, L elevado */ --azul-400: oklch(68% 0.125 252); --azul-500: oklch(57.5% 0.145 252); --azul-600: oklch(49% 0.135 252); /* acento light-mode (#1562AA) */ --azul-700: oklch(42% 0.115 252); --azul-800: oklch(34% 0.090 252); --azul-900: oklch(26% 0.065 252); /* Vinho — vermelho escuro (hue 22): crítico/destrutivo + assinatura editorial rara. NÃO compete com o azul como acento de UI. */ --vinho-50: oklch(97% 0.013 22); --vinho-100: oklch(94% 0.028 22); --vinho-200: oklch(87% 0.060 22); --vinho-300: oklch(72% 0.105 22); --vinho-400: oklch(62% 0.150 22); --vinho-500: oklch(52% 0.185 22); /* crítico light-mode (#BC2534) */ --vinho-600: oklch(45% 0.165 22); --vinho-700: oklch(38% 0.140 22); --vinho-800: oklch(31% 0.110 22); --vinho-900: oklch(25% 0.085 22); /* Funcionais dessaturados — estado, nunca marca */ --h3-success-400: oklch(70% 0.100 155); --h3-success-500: oklch(58% 0.105 155); --h3-success-600: oklch(50% 0.100 155); --h3-warning-500: oklch(72% 0.130 80); --h3-warning-600: oklch(56% 0.115 70); /* Tipografia H3aven: Mrs Eaves display (substitui Fraunces), corpo em sans de sistema (sério, custo zero de webfont), mono mantido. */ --font-sans: var(--font-ui); --font-display: 'Mrs Eaves', 'Mrs Eaves XL', Georgia, serif; --font-display-sub: 'Mrs Eaves XL', 'Mrs Eaves', Georgia, serif; --font-display-caps: 'Mrs Eaves Small Caps', 'Mrs Eaves', Georgia, serif; --font-brand: 'Mrs Eaves Petite Caps', 'Mrs Eaves', Georgia, serif; --font-report-serif: 'Mrs Eaves OS', Georgia, 'Times New Roman', serif; /* Shim legado (unificação): consumidores antigos que referenciam os primitivos Credito por nome continuam funcionando sob a marca H3aven. NÃO usar em código novo — código novo fala com semânticos ou --azul-*. */ --verde-50: var(--azul-50); --verde-100: var(--azul-100); --verde-200: var(--azul-200); --verde-300: var(--azul-300); --verde-400: var(--azul-400); --verde-500: var(--azul-500); --verde-600: var(--azul-600); --verde-700: var(--azul-700); --verde-800: var(--azul-800); --verde-900: var(--azul-900); --amber-500: var(--h3-warning-500); --magenta-500: var(--vinho-500); --cyan-500: var(--azul-400); --violet-500: oklch(52% 0.13 265); /* Overrides de fundação que referenciavam o verde diretamente */ --glow-brand: 0 0 0 2px var(--neutral-10), 0 0 0 4px color-mix(in oklab, var(--azul-500) 40%, transparent); --gradient-display-h1-light: linear-gradient(180deg, var(--neutral-950) 0%, color-mix(in oklch, var(--azul-800) 55%, var(--neutral-950) 45%) 100%); --gradient-display-h1-dark: linear-gradient(180deg, var(--neutral-100) 0%, color-mix(in oklch, var(--azul-300) 55%, var(--neutral-100) 45%) 100%); } /* --- 4b. SEMÂNTICOS H3AVEN (light — default) ------------------------------- */ [data-brand="h3aven"] { --bg-page: var(--neutral-25); --bg-card: var(--neutral-10); --bg-subtle: var(--neutral-50); --bg-elevated: var(--neutral-10); --bg-inverse: var(--neutral-950); --bg-canvas: var(--neutral-25); --bg-lift-1: var(--neutral-50); --bg-lift-2: var(--neutral-10); --bg-lift-3: var(--neutral-10); --bg-lift-4: var(--neutral-10); --text-primary: var(--neutral-950); --text-secondary: var(--neutral-700); --text-tertiary: var(--neutral-600); --text-inverse: var(--neutral-25); --text-brand: var(--azul-700); --border-default: var(--border-subtle); --border-focus: var(--azul-500); --brand-primary: var(--azul-600); --brand-hover: var(--azul-700); --brand-bg: var(--azul-50); --accent-critical: var(--vinho-500); --accent-critical-bg: var(--vinho-50); --status-success: var(--h3-success-600); --status-success-bg: oklch(96% 0.022 155); --status-warning: var(--h3-warning-600); --status-warning-bg: oklch(97% 0.040 80); --status-danger: var(--vinho-500); --status-danger-bg: var(--vinho-50); --status-info: var(--azul-600); --status-info-bg: var(--azul-50); --status-neutral: var(--neutral-500); --status-neutral-bg: var(--neutral-100); /* Rating — azul (bom) → neutro → vinho (ruim); sem verde de marca */ --rating-AA: var(--azul-700); --rating-A: var(--azul-500); --rating-B: var(--azul-400); --rating-C: var(--neutral-500); --rating-D: var(--h3-warning-600); --rating-E: oklch(55% 0.140 40); --rating-F: var(--vinho-400); --rating-G: var(--vinho-500); --rating-H: var(--vinho-700); } /* --- 4c. SEMÂNTICOS H3AVEN (dark — apresentação primária) ------------------ */ [data-brand="h3aven"][data-theme="dark"] { --bg-page: var(--neutral-950); --bg-card: var(--neutral-900); --bg-subtle: var(--neutral-925); --bg-elevated: var(--neutral-850); --bg-inverse: var(--neutral-25); --bg-canvas: var(--neutral-950); --bg-lift-1: var(--neutral-925); --bg-lift-2: var(--neutral-900); --bg-lift-3: var(--neutral-850); --bg-lift-4: var(--neutral-800); --text-primary: var(--neutral-100); --text-secondary: var(--neutral-300); --text-tertiary: var(--neutral-400); --text-inverse: var(--neutral-950); --text-brand: var(--azul-300); --border-default: 1px solid color-mix(in oklab, var(--neutral-0) 12%, transparent); --border-focus: var(--azul-300); --brand-primary: var(--azul-300); --brand-hover: var(--azul-200); --brand-bg: color-mix(in oklab, var(--azul-500) 16%, transparent); --accent-critical: var(--vinho-300); --accent-critical-bg: color-mix(in oklab, var(--vinho-500) 16%, transparent); --status-success: var(--h3-success-400); --status-success-bg: color-mix(in oklab, var(--h3-success-500) 14%, transparent); --status-warning: var(--h3-warning-500); --status-warning-bg: color-mix(in oklab, var(--h3-warning-500) 14%, transparent); --status-danger: var(--vinho-300); --status-danger-bg: color-mix(in oklab, var(--vinho-500) 16%, transparent); --status-info: var(--azul-300); --status-info-bg: color-mix(in oklab, var(--azul-500) 16%, transparent); --status-neutral: var(--neutral-400); --status-neutral-bg: color-mix(in oklab, var(--neutral-0) 6%, transparent); /* Rating dark: stops elevados para legibilidade sobre off-black */ --rating-AA: var(--azul-200); --rating-A: var(--azul-300); --rating-B: var(--azul-400); --rating-C: var(--neutral-400); --rating-D: var(--h3-warning-500); --rating-E: oklch(68% 0.140 40); --rating-F: var(--vinho-300); --rating-G: var(--vinho-400); --rating-H: var(--vinho-500); --glow-brand: 0 0 0 2px var(--neutral-900), 0 0 0 4px color-mix(in oklab, var(--azul-300) 45%, transparent); /* Sombras dark: quedas pretas + highlight interno fraco (herda o padrão selado do bloco dark Credito; valores idênticos, base acromática) */ --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 4px 8px -2px rgba(0,0,0,0.25), inset 0 1px 0 color-mix(in oklab, var(--neutral-0) 6%, transparent); --shadow-raised: 0 2px 4px rgba(0,0,0,0.4), 0 8px 16px -4px rgba(0,0,0,0.4), 0 16px 32px -12px rgba(0,0,0,0.35), inset 0 1px 0 color-mix(in oklab, var(--neutral-0) 6%, transparent); --shadow-overlay: 0 4px 8px -2px rgba(0,0,0,0.5), 0 16px 32px -8px rgba(0,0,0,0.55), 0 32px 64px -16px rgba(0,0,0,0.5), inset 0 1px 0 color-mix(in oklab, var(--neutral-0) 6%, transparent); } /* ========================================================================== 5. DATAVIZ — Apache ECharts é a biblioteca OFICIAL de gráficos do DS ========================================================================== Contrato selado (ver tools/echarts-theme.js, que constrói o tema ECharts lendo estes tokens em runtime — nenhum hex duplicado fora daqui): - Séries categóricas: ordem FIXA --chart-1..5, nunca ciclada; 6ª série dobra em "Other" (--chart-other). Cores seguem a entidade, nunca o rank. - Sequencial: um hue, claro→escuro (--chart-seq-1..5). - Divergente: dois polos + meio neutro (--chart-div-*). Nunca rainbow. - Status em gráfico usa os --status-* — reservados, nunca "série 4". - Paletas validadas (CVD ΔE≥8 adjacente, floor normal ≥15, contraste ≥3:1 vs superfície, chroma ≥0.10) nos DOIS modos — mesma identidade de série em light e dark. ========================================================================== */ :root { /* Credito — verde lidera; funcionais reaproveitados como série */ --chart-1: oklch(62% 0.17 142); /* verde #3D9E34 */ --chart-2: oklch(58% 0.12 220); /* ciano #0089AB */ --chart-3: oklch(65% 0.13 85); /* âmbar #B3880F */ --chart-4: oklch(58% 0.17 295); /* violeta #8460D2 */ --chart-5: oklch(53% 0.13 45); /* cobre #A74F21 */ --chart-other: var(--neutral-400); --chart-seq-1: var(--verde-100); --chart-seq-2: var(--verde-300); --chart-seq-3: var(--verde-500); --chart-seq-4: var(--verde-700); --chart-seq-5: var(--verde-900); --chart-div-neg: var(--magenta-500); --chart-div-mid: var(--neutral-400); --chart-div-pos: var(--verde-500); /* Estrutura (recessiva — grid/eixo nunca competem com os dados) */ --chart-grid: color-mix(in oklab, var(--text-primary) 8%, transparent); --chart-axis: color-mix(in oklab, var(--text-primary) 22%, transparent); --chart-label: var(--text-tertiary); } [data-brand="h3aven"] { /* H3aven — azul lidera; vinho fica RESERVADO a status (nunca série). Mesmo conjunto nos dois temas: identidade de série constante. */ --chart-1: oklch(56% 0.14 252); /* azul #2A76C3 */ --chart-2: oklch(62% 0.12 85); /* areia #A77F19 */ --chart-3: oklch(58% 0.13 188); /* teal #009289 */ --chart-4: oklch(53% 0.13 45); /* cobre #A74F21 */ --chart-5: oklch(52% 0.13 265); /* índigo #4365B3 */ --chart-other: var(--neutral-400); --chart-seq-1: oklch(90% 0.040 252); --chart-seq-2: oklch(78% 0.095 252); --chart-seq-3: oklch(65% 0.120 252); --chart-seq-4: oklch(52% 0.130 252); --chart-seq-5: oklch(40% 0.110 252); --chart-div-neg: oklch(62% 0.150 22); /* vinho-400 — polo negativo */ --chart-div-mid: var(--neutral-400); --chart-div-pos: oklch(68% 0.125 252); /* azul-400 — polo positivo */ } /* --- RESET MÍNIMO --------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-sans); /* DS-PREMIUM-A11Y: body bumped from --text-sm (14px) to --text-base (16px). 60+ audience needs WCAG-comfortable body size; 14px sits under the recommended 16px floor. UI chrome (buttons, labels, tags, mono data) styles its own --text-sm explicitly so this only affects plain prose / inline text — exactly where legibility matters most. */ font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums lining-nums; /* OpenType global (DS-PREMIUM-001): ss01 + cv11 (Inter alt glyphs) + zero (slashed-0). tnum/lnum already covered by font-variant-numeric. */ font-feature-settings: 'ss01' 1, 'cv11' 1, 'zero' 1; }