/* * tokens.css — Audit Dossier design foundation (SPEC-401) * --------------------------------------------------------------- * Este arquivo e a fonte de verdade dos design tokens da fase-04. * E carregado ANTES de styles.css no index.html, entao sobrescreve * variaveis antigas que tinham o mesmo nome. * * Estrutura: * 1. Paper — superficies (pergaminho quente, nao branco) * 2. Ink — hierarquia de texto (tinta cool sobre papel warm) * 3. Navy+Brass — brand (navy notarial + brass de selo) * 4. Seals — paleta semantica silenciada (musgo, oxblood, brass-ochre) * 5. Typography — Inter body + Spectral display * 6. Elevation — borders-only em 4 niveis * 7. Borders — progressao hairline -> emphasis -> brass * 8. Radius — escala formal (4/8/12) * 9. Shadows — raro, so pra modal/popover * 10. Motion — decelerating ease, sem spring/bounce * 11. Spine — signature tokens pro Evidence Spine (SPEC-405) * 12. Aliases — retrocompat pros nomes antigos usados em styles.css * 13. Utilities — .display-serif, .micro-label * * Regra: nenhum hex hardcoded nas SPECs 402-405. Tudo por token. */ :root { /* ============================================================= * 1. PAPER — superficies * ============================================================= */ --paper-canvas: #F7F4ED; /* page background (elev-0) */ --paper-leaf: #FCFAF6; /* card, panel, view (elev-1) */ --paper-elevated: #FEFCF8; /* dropdown, popover (elev-2) */ --paper-modal: #FEFCF8; /* modal surface (elev-3) */ --paper-inset: #F1ECE2; /* input bg (inset) */ --paper-vellum: #FFFFFF; /* reservado: emphasis puro */ /* ============================================================= * 2. INK — hierarquia de texto * ============================================================= */ --ink-primary: #15181E; /* default text, headings */ --ink-secondary: #4B5260; /* supporting text, labels */ --ink-tertiary: #62686F; /* metadata, helper (WCAG AA: 5.40:1 on paper-leaf) */ --ink-muted: #A8ADB7; /* disabled, placeholder (WCAG exempts disabled) */ --ink-inverse: #F4EADB; /* text sobre navy (nao branco puro) */ --ink-link: #2A4A7A; /* azul nanquim, nao web-blue */ /* ============================================================= * 3. NAVY + BRASS — brand * ============================================================= */ --brand-navy: #0C1B2E; /* header, primary action */ --brand-navy-mid: #1A2E4A; /* hover */ --brand-navy-light: #243B5C; /* active/pressed */ --brand-brass: #A8823A; /* seal fill on navy (WCAG AA on navy: 4.88:1) */ --brand-brass-ink: #836424; /* brass text on paper (WCAG AA on canvas: 5.01:1) */ --brand-brass-soft: #D4A843; /* reservado: hover de seal */ /* ============================================================= * 4. SEALS — paleta semantica silenciada * ============================================================= */ /* Pass (attested) */ --seal-pass: #5A7A4A; --seal-pass-ink: #2F4C24; --seal-pass-bg: #EDF0E7; --seal-pass-edge: #C5D1B5; /* Exception (fail) */ --seal-exception: #8C3A2E; --seal-exception-ink: #5A2218; --seal-exception-bg: #F2E6E1; --seal-exception-edge: #D4AEA5; /* Review (atencao) */ --seal-review: #B07818; --seal-review-ink: #704A0F; --seal-review-bg: #F5EDD8; --seal-review-edge: #D9C58F; /* Error (sistema) */ --seal-error: #5E636D; --seal-error-ink: #33373E; --seal-error-bg: #EDEEF0; --seal-error-edge: #CDD0D6; /* Info */ --seal-info: #2A4A7A; --seal-info-ink: #1B3055; --seal-info-bg: #E6ECF4; --seal-info-edge: #B8C5D9; /* ============================================================= * 5. TYPOGRAPHY * ============================================================= */ --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Spectral', 'Source Serif 4', Georgia, serif; --font-mono: 'SF Mono', SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace; --text-label: 11px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 28px; --text-display: 40px; /* login title (serif) */ --text-hero: 56px; /* report cover title (serif) */ /* ============================================================= * 6. ELEVATION — borders-only, sem shadow dramatica * ============================================================= */ /* elev-0: --paper-canvas, no border */ /* elev-1: --paper-leaf + --edge-subtle */ /* elev-2: --paper-elevated + --edge-default + --shadow-xs */ /* elev-3: --paper-modal + --edge-emphasis + --shadow-lg */ /* ============================================================= * 7. BORDERS — progressao * ============================================================= */ --edge-hairline: rgba(20, 25, 35, 0.06); /* separador interno de card */ --edge-subtle: rgba(20, 25, 35, 0.08); /* default de card/panel */ --edge-default: rgba(20, 25, 35, 0.12); /* input, button ghost */ --edge-emphasis: rgba(20, 25, 35, 0.22); /* focado, selecionado */ --edge-focus: rgba(168, 130, 58, 0.55); /* focus ring (brass) */ --edge-brass: rgba(168, 130, 58, 0.35); /* seal emphasis */ /* ============================================================= * 8. RADIUS — escala formal * ============================================================= */ --radius-sm: 4px; /* input, button, chip */ --radius-md: 8px; /* card, panel, dropdown */ --radius-lg: 12px; /* modal */ --radius-pill: 100px; /* usos legitimos apenas */ --radius-full: 9999px; /* ============================================================= * 9. SHADOWS — reservadas pra modal/popover * ============================================================= */ --shadow-xs: 0 1px 2px rgba(20, 25, 35, 0.04); --shadow-sm: 0 1px 3px rgba(20, 25, 35, 0.06), 0 1px 2px rgba(20, 25, 35, 0.04); --shadow-lg: 0 8px 24px rgba(20, 25, 35, 0.12), 0 2px 6px rgba(20, 25, 35, 0.06); --shadow-focus-brass: 0 0 0 3px rgba(168, 130, 58, 0.18); --shadow-focus-ink: 0 0 0 3px rgba(20, 25, 35, 0.10); /* ============================================================= * 10. MOTION * ============================================================= */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; /* ============================================================= * 11. SPINE — signature (SPEC-405) * ============================================================= */ --spine-width: 32px; --spine-bg: rgba(20, 25, 35, 0.025); --spine-edge: var(--edge-hairline); --spine-font: var(--font-mono); --spine-size: 10px; --spine-ink: var(--ink-tertiary); /* ============================================================= * SPACING — inalterado (manter do sistema atual) * ============================================================= */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; } /* ================================================================== * 12. LEGACY ALIASES * ------------------------------------------------------------------ * Retrocompat pra styles.css e codigo legado. REMOVER quando o CSS * antigo tiver sido migrado pros nomes novos (fase futura). * ================================================================== */ :root { /* surface-* -> paper-* */ --surface-page: var(--paper-canvas); --surface-card: var(--paper-leaf); --surface-elevated: var(--paper-elevated); --surface-inset: var(--paper-inset); --surface-subtle: var(--paper-canvas); --surface-primary: var(--paper-leaf); /* usado em styles.css:843,955,1109 */ /* text-* -> ink-* (nomes antigos usados em alguns componentes) */ --text-primary: var(--ink-primary); --text-secondary: var(--ink-secondary); /* text-xs / fs-xs -> text-label (11px) */ --text-xs: var(--text-label); --fs-xs: var(--text-label); /* text-2xl / text-xl / hero (manter mas garantir existencia — ja definidos acima) */ /* radius-xl (alias pro md — tamanho maior nao faz mais sentido na nova escala) */ --radius-xl: var(--radius-lg); /* brand-gold -> brand-brass (renomeacao conceitual) */ --brand-gold: var(--brand-brass); --brand-gold-dark: var(--brand-brass); --brand-gold-light: var(--brand-brass-soft); --brand-primary: var(--brand-navy); /* usado em styles.css:1281 */ --edge-gold: var(--edge-brass); --shadow-gold: var(--shadow-focus-brass); /* brand-nt-* sao cores de logo. Nao devem aparecer em UI novo, mas manter referencia pra compat. */ --brand-nt-green: #4CAF50; /* logo only */ --brand-nt-blue: #2196F3; /* logo only */ /* status-* -> seal-* (renomeacao conceitual) */ --status-pass: var(--seal-pass); --status-pass-ink: var(--seal-pass-ink); --status-pass-bg: var(--seal-pass-bg); --status-pass-edge: var(--seal-pass-edge); --status-fail: var(--seal-exception); --status-fail-ink: var(--seal-exception-ink); --status-fail-bg: var(--seal-exception-bg); --status-fail-edge: var(--seal-exception-edge); --status-review: var(--seal-review); --status-review-ink: var(--seal-review-ink); --status-review-bg: var(--seal-review-bg); --status-review-edge: var(--seal-review-edge); --status-error: var(--seal-error); --status-error-ink: var(--seal-error-ink); --status-error-bg: var(--seal-error-bg); --status-error-edge: var(--seal-error-edge); --status-info: var(--seal-info); --status-info-ink: var(--seal-info-ink); --status-info-bg: var(--seal-info-bg); --status-info-edge: var(--seal-info-edge); /* shadow-md e shadow-xl nao existem mais — alias pras escalas novas */ --shadow-md: var(--shadow-sm); --shadow-xl: var(--shadow-lg); /* shadow-header — header agora usa navy solido sem peso extra. Alias para xs mantido pra nao quebrar styles.css */ --shadow-header: var(--shadow-xs); } /* ================================================================== * 13. UTILITIES * ================================================================== */ .display-serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; } .micro-label { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-tertiary); } .micro-label--brass { color: var(--brand-brass-ink); } /* on paper */ .micro-label--danger { color: var(--seal-exception); } /* Reduced motion: desabilita transicoes nao essenciais */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }