/* ========================================================= Design tokens base + temas (claro, escuro, mono, daltônico) - WCAG AAA: pares texto/fundo garantem ≥ 7:1 (normal) - CSP-performance: sem @import externo; fallbacks seguros - Alternância de tema instantânea via classe no - Overlay global ajustável por variável (legibilidade sobre imagens) - Ajuste dinâmico de fonte via [data-font-scale] ========================================================= */ /* =========================== Tokens comuns (não temáticos) =========================== */ :root { /* Paleta estrutural */ --color-surface: #1b1b1f; --color-surface-alt: #222229; /* Acentos e estados */ --color-primary: #d4af37; --color-primary-dark: #b8962e; --color-accent: #0097a7; --color-accent-alt: #00e6e6; --color-secondary: #6c757d; --color-danger: #e74c3c; --color-warning: #ffc107; --color-success: #2ecc71; /* Tipografia (CSP-friendly) */ --font-main: 'Segoe UI', Arial, sans-serif; --font-base: 'Segoe UI', Arial, sans-serif; /* Escalas base (multiplicadas por --font-scale) */ --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-xxl: 2rem; /* Controle global de escala */ --font-scale: 1; /* Espaçamentos */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; /* Layout */ --sidebar-width: 240px; --sidebar-collapsed: 60px; --gutter: 32px; --sidebar-offset-top: 12px; /* Bordas */ --radius-sm: 8px; --radius: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* Sombras */ --shadow-card: 0 4px 8px rgba(0,0,0,0.4); --shadow-card-lg: 0 8px 24px rgba(0,0,0,0.35); --shadow-inset-soft: inset 0 0 6px rgba(0,151,167,.25); --shadow-glow: 0 0 8px rgba(0,230,230,.35); --shadow-glow-strong: 0 0 12px rgba(0,230,230,.5); /* Transições */ --transition-fast: all .15s ease; --transition: all .25s ease; --transition-slow: all .4s ease; /* Gradientes comentados e transportados para variáveis de tema --gradient-light-trail: linear-gradient(135deg, rgba(244,182,58,.06), rgba(0,151,167,.06)); --gradient-header: linear-gradient(90deg, rgba(15,15,16,.95), rgba(26,26,29,.9)); --gradient-surface: linear-gradient(180deg, #1b1b1f 0%, #222229 100%); */ /* Foco (visível) */ --focus-outline: 0 0 0 3px rgba(244,182,58,.35); --focus-outline-strong: 0 0 0 3px rgba(0,230,230,.45); /* Charts */ --chart-success: #2ecc71; --chart-danger: #e74c3c; --chart-accent: #2196f3; --chart-bar: var(--color-accent); /* Z-index */ --z-base: 1; --z-dropdown: 1000; --z-overlay: 1050; --z-modal: 1100; --z-toast: 1200; /* Avatares */ --avatar-size-header: 56px; --avatar-size-popup: 120px; --avatar-border: 2px solid #fff; --avatar-shadow: 0 0 6px rgba(0,0,0,.4); /* Acessibilidade adicional */ --motion-reduce-duration: .01ms; /* Links */ --link-decoration-default: underline; /* Intensidade do overlay global (ajustável) */ --overlay-strength: 0.25; /* recomendado 0.3–0.8 */ } /* =========================== Temas com contraste AAA (aplicados no body) =========================== */ /* Tema Claro */ body.theme-light { --color-bg: #FFFFFF; --color-text-primary: #0D0D0F; --color-text-secondary: #222222; --color-accent-current: #0D0D0F; --overlay-bg: rgba(255,255,255,var(--overlay-strength)); /* Gradientes claros */ --gradient-header: linear-gradient(90deg, rgba(255,255,255,.95), rgba(240,240,240,.9)); --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%); } /* Tema Escuro */ body.theme-dark { --color-bg: #0D0D0F; --color-text-primary: #F5F5F5; --color-text-secondary: #A6A6A6; --color-accent-current: #F5F5F5; --overlay-bg: rgba(0,0,0,var(--overlay-strength)); /* Gradientes escuros */ --gradient-header: linear-gradient(90deg, rgba(15,15,16,.95), rgba(26,26,29,.9)); --gradient-surface: linear-gradient(180deg, #1b1b1f 0%, #222229 100%); } /* Tema Monocromático Claro */ body.theme-mono-light { --color-bg: #FFFFFF; --color-text-primary: #0D0D0F; --color-text-secondary: #555555; --color-accent-current: #0D0D0F; --overlay-bg: rgba(255,255,255,var(--overlay-strength)); } /* Tema Monocromático Escuro */ body.theme-mono-dark { --color-bg: #0D0D0F; --color-text-primary: #F5F5F5; --color-text-secondary: #A6A6A6; --color-accent-current: #F5F5F5; --overlay-bg: rgba(0,0,0,var(--overlay-strength)); } /* Tema Daltônico Claro */ body.theme-dalt-light { --color-bg: #FFFFFF; --color-text-primary: #0D0D0F; --color-text-secondary: #555555; --color-accent-current: #005fcc; --overlay-bg: rgba(255,255,255,var(--overlay-strength)); } /* Tema Daltônico Escuro */ body.theme-dalt-dark { --color-bg: #0D0D0F; --color-text-primary: #F5F5F5; --color-text-secondary: #A6A6A6; --color-accent-current: #00d3ff; --overlay-bg: rgba(0,0,0,var(--overlay-strength)); } /* =========================== Ajuste dinâmico de fonte =========================== */ :root[data-font-scale="sm"] { --font-scale: 0.9; } :root[data-font-scale="md"] { --font-scale: 1; } :root[data-font-scale="lg"] { --font-scale: 1.15; } :root[data-font-scale="xl"] { --font-scale: 1.3; } /* =========================== Base: fundo, texto e tipografia =========================== */ html, body { background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-main); font-size: calc(16px * var(--font-scale)); line-height: 1.6; text-rendering: optimizeLegibility; } /* Texto secundário */ .muted, .text-muted { color: var(--color-text-secondary); } /* Links acessíveis */ a { color: var(--color-accent-current, var(--color-text-primary)); text-decoration: var(--link-decoration-default); transition: color .2s ease; } a:hover, a:focus { color: var(--color-text-secondary); outline: 2px solid currentColor; outline-offset: 2px; } /* Botões básicos (seguem acento atual do tema) */ button { color: var(--color-accent-current, var(--color-text-primary)); background: transparent; border: 1px solid currentColor; padding: 8px 12px; border-radius: var(--radius-sm); transition: var(--transition-fast); } button:hover, button:focus { box-shadow: var(--focus-outline-strong); } /* Header com fallback sólido */ .header-solid, .landing-header { background: var(--gradient-header); background-color: var(--color-bg); } /* =========================== Overlay global (acessibilidade) =========================== */ body::after { content: ""; position: fixed; inset: 0; background: var(--overlay-bg, transparent); pointer-events: none; z-index: var(--z-overlay); } /* =========================== Movimento reduzido =========================== */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: none; --transition: none; --transition-slow: none; } }