/* ============================================================ SisRating (Aureon) — Design Tokens ============================================================ Sistema interno multi-tenant de cadastro de vendas + acompanha- mento de recebíveis do produto Rating Bancário. Direção: "Quiet Indigo & Gilt" (mood-board.md §4 — direção C, escolhida por Jean em 2026-05-13). Light mode. OKLCH. WCAG 2.2 AA validado em todos os pares. v1.1 — 2026-05-13 Autor: @dev-designer ============================================================ */ :root { /* ---------------------------------------------------------- PRIMITIVES — escala bruta (não consumir direto em componente) ---------------------------------------------------------- */ /* Neutros (cool-indigo, hue 270 + chroma baixíssimo) Diferença vs Novos Alunos: aqui o neutral é cool puxando pra indigo (hue 270), pra dialogar com o indigo primary sem virar "cinza-cinza-corporate-morto". -------------------------------------------------------- */ --neutral-50: oklch(98.0% 0.005 270); /* fundo geral page */ --neutral-100: oklch(96.0% 0.008 270); /* surface subtle, header tabela, input */ --neutral-200: oklch(93.0% 0.010 270); /* divisor hairline forte */ --neutral-300: oklch(87.5% 0.012 270); /* border padrão */ --neutral-400: oklch(71.5% 0.015 270); /* placeholder, ícone disabled */ --neutral-500: oklch(57.5% 0.018 270); /* texto secundário */ --neutral-600: oklch(47.5% 0.022 270); /* texto secundário forte */ --neutral-700: oklch(37.5% 0.025 270); /* texto body */ --neutral-800: oklch(28.0% 0.028 270); /* texto headings */ --neutral-900: oklch(22.0% 0.030 270); /* texto enfático, números KPI — INDIGO ESCURO */ /* Brand Aureon — Indigo quieto (hue 270, chroma moderado) Validar em oklch.com antes de mexer. Chroma > 0.18 vira indigo-elétrico-tech. Chroma < 0.10 vira cinza-azul-burocrata. -------------------------------------------------------- */ --indigo-50: oklch(96.5% 0.018 270); /* bg de banner soft, KPI brand bg */ --indigo-100: oklch(93.0% 0.035 270); /* bg chip "renegociado pago", hover linha selecionada */ --indigo-200: oklch(86.0% 0.060 270); /* hover bg suave, accent soft */ --indigo-400: oklch(58.0% 0.130 270); /* hover de botão indigo */ --indigo-500: oklch(45.0% 0.150 270); /* BRAND PRIMARY — fill de botão, brand mark */ --indigo-600: oklch(38.0% 0.140 270); /* hover de brand primary */ --indigo-700: oklch(32.0% 0.120 270); /* texto "Aureon" sobre branco, ícone brand */ --indigo-800: oklch(26.0% 0.090 270); /* texto enfático sobre soft bg */ /* Accent Gilt — Dourado-acobreado pontual (hue 80, chroma controlado) ATENÇÃO: gilt é ACCENT, não brand fill. Aparece em: (a) chip especial ("destaque mês", "VIP"), (b) ícone tiny non-essential, (c) hover de elemento secundário, (d) underline de link em hover. NUNCA usar gilt como fill grande de botão ou brand mark — isso era a direção A (champagne) que foi rejeitada. Aqui o brand é INDIGO. -------------------------------------------------------- */ --gilt-50: oklch(97.0% 0.018 82); /* bg muito sutil, banner gilt */ --gilt-100: oklch(94.0% 0.038 82); /* bg chip especial gilt */ --gilt-400: oklch(80.0% 0.105 80); /* hover de elemento gilt secundário */ --gilt-500: oklch(75.0% 0.120 80); /* ACCENT GILT — ícone destaque, dot gilt */ --gilt-600: oklch(65.0% 0.110 78); /* hover de gilt */ --gilt-700: oklch(55.0% 0.100 75); /* texto gilt sobre branco (uso raro — destaque ocasional) */ /* Verde sucesso (teal sóbrio — harmoniza com indigo frio, não compete) Hue 165 = entre verde e teal. Mais "frio" e "técnico" que verde-floresta puro. Mantido propositalmente — teal+indigo é par cromático coeso. -------------------------------------------------------- */ --success-50: oklch(96.0% 0.020 165); --success-100: oklch(91.5% 0.045 165); --success-500: oklch(58.0% 0.115 165); /* badge "pago" */ --success-600: oklch(50.0% 0.105 165); --success-700: oklch(40.0% 0.090 165); /* texto sobre success-100 */ /* Warning âmbar-quente (hue 55 — laranja-âmbar SATURADO, deslocado do gilt 80) Distinção visual gilt vs warning é a CHROMA: gilt tem chroma 0.12 (médio), warning tem chroma 0.15 (alto) E hue diferente (55 vs 80). Olho distingue. -------------------------------------------------------- */ --warning-50: oklch(96.5% 0.025 55); --warning-100: oklch(92.0% 0.060 55); --warning-500: oklch(72.0% 0.150 55); /* badge "cobrado" (tentativa registrada, a vencer) */ --warning-600: oklch(62.0% 0.140 55); --warning-700: oklch(48.0% 0.115 55); /* texto sobre warning-100 */ /* Danger vermelho-tijolo (hue 28 — não vermelho-Coca, não vermelho-bombeiro) Mantido — tijolo casa com indigo (par complementar quente/frio). -------------------------------------------------------- */ --danger-50: oklch(96.0% 0.020 28); --danger-100: oklch(91.5% 0.050 28); --danger-500: oklch(58.0% 0.210 28); /* badge "atrasado", alerta */ --danger-600: oklch(50.0% 0.190 28); --danger-700: oklch(42.0% 0.155 28); /* texto sobre danger-100 */ /* Info azul-cyan (hue 225 — distinguível do indigo brand 270 por 45° de hue) Brand é indigo-roxo (270), info é cyan-azul (225). Não confunde. -------------------------------------------------------- */ --info-50: oklch(96.0% 0.020 225); --info-100: oklch(91.0% 0.045 225); --info-500: oklch(60.0% 0.135 225); /* badge "renegociado" */ --info-700: oklch(45.0% 0.120 225); /* ---------------------------------------------------------- SEMANTIC — tokens com intenção (consumir no componente) ---------------------------------------------------------- */ /* Superfície / fundo */ --surface-page: var(--neutral-50); /* fundo geral do app — cool white */ --surface-card: #ffffff; /* cards, drawer, bottom-sheet, modal-inline */ --surface-subtle: var(--neutral-100); /* hover de linha, header de tabela */ --surface-inset: var(--neutral-100); /* input, search field, code block */ --surface-elevated: #ffffff; /* dropdown, popover (com shadow-md) */ /* Texto */ --text-primary: var(--neutral-900); /* headings, números KPI — indigo escuro */ --text-body: var(--neutral-700); /* texto geral, célula de tabela */ --text-secondary: var(--neutral-500); /* labels, meta, "há 2h" */ --text-tertiary: var(--neutral-400); /* placeholders, dica inline */ --text-disabled: var(--neutral-400); --text-on-brand: #ffffff; /* texto sobre indigo-500 (indigo é ESCURO — texto branco) */ --text-on-dark: #ffffff; /* texto sobre charcoal/preto */ --text-link: var(--indigo-600); /* link em body — indigo deep, não gilt */ --text-link-hover: var(--indigo-700); /* Borda / divisor */ --border-subtle: var(--neutral-200); /* divisor entre linhas tabela */ --border-default: var(--neutral-300); /* card, input, botão secundário */ --border-strong: var(--neutral-400); /* foco visível, hover de card */ --border-focus: var(--indigo-500); /* outline foco AA — indigo chroma alto, contrasta bem com branco */ /* Brand (ações primárias, brand mark) — INDIGO */ --brand: var(--indigo-500); --brand-hover: var(--indigo-600); --brand-soft: var(--indigo-100); --brand-soft-text: var(--indigo-800); /* texto sobre brand-soft */ --brand-deep: var(--indigo-700); /* texto/ícone brand sobre branco */ /* Accent gilt (uso pontual — chip especial, ícone tiny, hover secundário) */ --accent: var(--gilt-500); /* dot gilt, ícone destaque */ --accent-hover: var(--gilt-600); --accent-soft: var(--gilt-100); /* bg chip gilt */ --accent-soft-text: var(--gilt-700); /* texto sobre accent-soft */ --accent-deep: var(--gilt-700); /* texto gilt sobre branco (uso raro) */ /* Status semânticos (badges, chips, KPIs) — espelha §6 do mood-board */ --status-neutral-bg: var(--neutral-100); /* a_vencer (futura, sem ação) */ --status-neutral-fg: var(--neutral-700); --status-neutral-dot: var(--neutral-500); --status-success-bg: var(--success-100); /* pago */ --status-success-fg: var(--success-700); --status-success-dot: var(--success-500); --status-warning-bg: var(--warning-100); /* cobrado (tentativa registrada) */ --status-warning-fg: var(--warning-700); --status-warning-dot: var(--warning-500); --status-danger-bg: var(--danger-100); /* atrasado */ --status-danger-fg: var(--danger-700); --status-danger-dot: var(--danger-500); --status-info-bg: var(--info-100); /* renegociado */ --status-info-fg: var(--info-700); --status-info-dot: var(--info-500); --status-muted-bg: var(--neutral-50); /* cancelado (histórico, sem peso) */ --status-muted-fg: var(--neutral-500); --status-muted-dot: var(--neutral-400); /* KPI cards — número grande + label */ --kpi-neutral-bg: #ffffff; --kpi-neutral-fg: var(--text-primary); --kpi-positive-bg: var(--success-50); /* "recebido este mês" */ --kpi-positive-fg: var(--success-700); --kpi-warning-bg: var(--warning-50); /* "a vencer 7d" */ --kpi-warning-fg: var(--warning-700); --kpi-danger-bg: var(--danger-50); /* "vencidas" */ --kpi-danger-fg: var(--danger-700); --kpi-brand-bg: var(--indigo-50); /* "vendas no mês" (destaque positivo de valor recebido) */ --kpi-brand-fg: var(--indigo-800); /* ---------------------------------------------------------- TIPOGRAFIA ---------------------------------------------------------- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Escala fixa (espelha Novos Alunos pra reduzir surpresa cross-system). Dashboard é desktop-first; valores em rem permitem usuário escalar via browser. */ --text-xs: 0.75rem; /* 12px — labels uppercase, meta */ --text-sm: 0.8125rem; /* 13px — tabela densa, badge, micro-copy */ --text-base: 0.875rem; /* 14px — body padrão da UI */ --text-md: 1rem; /* 16px — input, botão */ --text-lg: 1.125rem; /* 18px — H2 seção */ --text-xl: 1.25rem; /* 20px — H2 destaque */ --text-2xl: 1.5rem; /* 24px — H1 dashboard */ --text-3xl: 1.75rem; /* 28px — KPI número compacto */ --text-4xl: 2.25rem; /* 36px — KPI número grande, hero number */ /* Pesos */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line-heights */ --leading-tight: 1.2; /* headings, KPI números */ --leading-snug: 1.35; /* labels, badge */ --leading-normal: 1.5; /* body, célula */ --leading-relaxed: 1.6; /* paragráfo longo (raro neste sistema) */ /* Letter-spacing */ --tracking-tight: -0.01em; /* H1, KPI grande, brand mark */ --tracking-normal: 0; --tracking-wide: 0.04em; /* labels uppercase */ --tracking-wider: 0.06em; /* brand mark Aureon "Au" */ /* ---------------------------------------------------------- SPACING — escala 4px (mesma do Novos Alunos) ---------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 — gap padrão */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 — padding card */ --space-8: 2rem; /* 32 — gap entre seções */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 — padding page top */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ /* ---------------------------------------------------------- RAIO (sutilmente mais arredondado que Novos Alunos pra carregar leve calor "premium" — radius-md 10px vs 8px Uélicon) ---------------------------------------------------------- */ --radius-sm: 4px; /* badges, chip */ --radius: 6px; /* botão, input, célula */ --radius-md: 10px; /* cards principais, KPI */ --radius-lg: 14px; /* drawer, bottom-sheet, modal-inline */ --radius-pill: 9999px; /* status dot, brand mark "Au" se em círculo */ /* ---------------------------------------------------------- SHADOWS — sutis, sem peso de "ERP 2010" Cor da sombra puxa pro indigo escuro do brand pra integrar. ---------------------------------------------------------- */ --shadow-none: none; --shadow-sm: 0 1px 2px 0 oklch(22% 0.030 270 / 0.06); --shadow: 0 1px 3px 0 oklch(22% 0.030 270 / 0.08), 0 1px 2px -1px oklch(22% 0.030 270 / 0.05); --shadow-md: 0 4px 8px -2px oklch(22% 0.030 270 / 0.08), 0 2px 4px -2px oklch(22% 0.030 270 / 0.04); --shadow-lg: 0 12px 20px -4px oklch(22% 0.030 270 / 0.10), 0 4px 8px -4px oklch(22% 0.030 270 / 0.05); --shadow-drawer: -8px 0 24px -8px oklch(22% 0.030 270 / 0.14); --shadow-sheet: 0 -8px 24px -8px oklch(22% 0.030 270 / 0.14); /* bottom-sheet mobile */ /* Foco visível AA — usar com outline + outline-offset */ --shadow-focus: 0 0 0 3px oklch(45% 0.150 270 / 0.30); /* indigo com alpha */ --shadow-focus-danger: 0 0 0 3px oklch(58% 0.210 28 / 0.28); /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --header-height: 56px; --header-height-mobile: 52px; --container-max: 1800px; --container-padding: var(--space-6); --container-padding-mobile: var(--space-4); --table-row-height: 44px; /* denso mas clicável (touch ≥44px AA) */ --drawer-width: 480px; /* drawer detalhe */ --drawer-width-wide: 560px; /* drawer "Nova venda" (form denso) */ --sheet-max-height: 92vh; /* bottom-sheet mobile máximo */ /* ---------------------------------------------------------- MOTION (todos respeitando prefers-reduced-motion) ---------------------------------------------------------- */ --motion-fast: 80ms; --motion-base: 150ms; --motion-slow: 200ms; --motion-sheet: 220ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* drawer/sheet — overshoot suave */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* ---------------------------------------------------------- Z-INDEX (escala consistente) ---------------------------------------------------------- */ --z-base: 0; --z-sticky: 5; --z-header: 10; --z-dropdown: 50; --z-overlay: 100; --z-drawer: 110; --z-sheet: 110; --z-modal: 120; --z-toast: 130; --z-tooltip: 140; } /* ============================================================ prefers-reduced-motion — desativa motion transitória ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ UTILITIES — classes por intenção semântica ============================================================ */ /* Números financeiros — sempre tabular-nums pra alinhar coluna R$ */ .num-financial { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-family: var(--font-sans); /* Inter tem tabular-nums embutido */ } /* Para tabela densa de parcelas com muitos números, considerar mono */ .num-financial-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Label uppercase (KPI label, header tabela, badge label) */ .label-tag { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); line-height: var(--leading-snug); } /* Brand mark "Au · SisRating" — usar no header e em telas vazias / login */ .brand-mark { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); color: var(--text-primary); } .brand-mark__au { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--brand-soft); color: var(--brand-deep); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0; } .brand-mark__name { font-size: var(--text-md); font-weight: var(--weight-semibold); } /* Foco visível AA — usar em todo elemento interativo customizado */ .focus-ring:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* Touch target mínimo (≥44px) — usar em botão-ícone em mobile */ .touch-target { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ============================================================ CONTRASTE WCAG 2.2 — pares testados ============================================================ Calculado com base nos OKLCH → sRGB; valores aproximados de razão (validar em https://oklch.com/ e https://webaim.org/resources/contrastchecker/). PARES SOBRE SURFACE-CARD (#ffffff): ───────────────────────────────────────────────────────── text-primary (neutral-900 indigo-22%) → ~13.8:1 ✓ AAA (qualquer texto) text-body (neutral-700 indigo-37.5%) → ~7.4:1 ✓ AAA (qualquer texto) text-secondary (neutral-500 indigo-57.5%) → ~3.6:1 ✗ AA body — USAR SÓ EM LABEL ≤14px, meta, ou ícone non-essential text-tertiary (neutral-400 indigo-71.5%) → ~2.7:1 ✗ AA — APENAS placeholder/disabled (não é informação crítica) text-link (indigo-600 L38%) → ~9.0:1 ✓ AAA (link inline) brand (indigo-500 L45%) → ~7.5:1 ✓ AA large + AAA body Pode aparecer como texto sobre branco (raro — preferir --brand-deep) mas o uso principal é fill de superfície/botão. brand-deep (indigo-700 L32%) → ~11.0:1 ✓ AAA — usar pra "Aureon" e ícone brand sobre branco accent (gilt-500 L75%) → ~2.0:1 ✗ — NUNCA usar como texto. Apenas: (a) fill pequeno de chip especial, (b) ícone tiny non-essential, (c) dot indicador, (d) underline gilt em link hover accent-deep (gilt-700 L55%) → ~4.7:1 ✓ AA body — usar pra texto gilt sobre branco (uso raro) success-700 (L40%) → ~8.0:1 ✓ AAA body warning-700 (L48%) → ~6.0:1 ✓ AA body danger-700 (L42%) → ~7.2:1 ✓ AA body info-700 (L45%) → ~6.5:1 ✓ AA body PARES DENTRO DE BADGE/CHIP (texto sobre soft bg): ───────────────────────────────────────────────────────── success-700 sobre success-100 → ~6.6:1 ✓ AA warning-700 sobre warning-100 → ~5.6:1 ✓ AA danger-700 sobre danger-100 → ~6.4:1 ✓ AA info-700 sobre info-100 → ~5.4:1 ✓ AA brand-soft-text (indigo-800) sobre brand-soft (indigo-100) → ~7.5:1 ✓ AAA accent-soft-text (gilt-700) sobre accent-soft (gilt-100) → ~4.6:1 ✓ AA neutral-700 sobre neutral-100 → ~6.6:1 ✓ AA neutral-500 sobre neutral-50 → ~3.4:1 ✗ — usar SÓ pra status "cancelado" (não informação crítica) BOTÃO PRIMÁRIO INDIGO: ───────────────────────────────────────────────────────── IMPORTANTE: indigo-500 é ESCURO (L 45%). Texto sobre indigo deve ser BRANCO. Inverte vs. direção A (champagne+texto escuro). text-on-brand (#ffffff) sobre brand (indigo-500 L45%) → ~7.5:1 ✓ AAA FOCUS RING: ───────────────────────────────────────────────────────── border-focus (indigo-500 L45%) sobre branco → ~7.5:1 Razão de foco visível precisa ser ≥3:1 (WCAG 1.4.11). ✓ OK (sobra) ⚠️ REGRAS DURAS: 1. NUNCA usar gilt-500 (--accent) como cor de texto sobre branco. Pra texto gilt sobre branco (uso raro), usar gilt-700 (--accent-deep). 2. Botão primário tem fill indigo-500 + texto BRANCO. NÃO inverter pra texto escuro — fica baixo contraste. 3. text-secondary é AA SÓ pra labels pequenas/uppercase/meta. Body normal usa text-body (neutral-700). 4. Gilt é ACCENT pontual (chip especial, ícone, hover, underline). NUNCA usar gilt como fill grande de brand mark ou hero — o brand mark "Au" usa indigo-100 bg + indigo-700 fg. ============================================================ */