/* ============================================================ FiscoCloud — tokens.css Fonte unica de verdade para cores, tipografia, espacamento, radius, sombras, motion e z-index. NENHUMA cor e hardcoded nos componentes — tudo passa por estas custom properties. Tema escuro: troca de valores via [data-theme="dark"] no (sincronizado pelo MainLayout via window.fcAplicarTema). Espelhado de artifacts/docs/front-end-prototipo/prototipo/assets/css/tokens.css. ============================================================ */ :root, [data-theme="light"] { /* ===== Marca ===== */ --fc-primary: #3051F5; --fc-primary-hover: #2743D6; --fc-primary-active: #1F38B8; --fc-primary-soft: rgba(48, 81, 245, 0.08); --fc-primary-contrast: #FFFFFF; --fc-accent: #C4F530; --fc-accent-contrast: #16181D; /* ===== Superficies e texto ===== */ --fc-bg: #F6F7FB; --fc-surface: #FFFFFF; --fc-surface-alt: #EFF1F7; --fc-text: #16181D; --fc-text-secondary: #5A6072; --fc-text-muted: #8A91A3; --fc-border: #D9DEE8; --fc-border-strong: #B9C0CF; --fc-link: #3051F5; /* ===== Semanticas (badges/alerts SOMENTE) ===== */ --fc-success: #0D7A4F; --fc-success-bg: rgba(13, 122, 79, 0.10); --fc-warning: #9A6700; --fc-warning-bg: rgba(154, 103, 0, 0.10); --fc-danger: #B42318; --fc-danger-bg: rgba(180, 35, 24, 0.12); --fc-info: #175CD3; --fc-info-bg: rgba(23, 92, 211, 0.10); /* ===== Tipografia ===== */ --fc-font: 'Jost', system-ui, -apple-system, sans-serif; --fc-font-mono: 'JetBrains Mono', 'Cascadia Code', monospace; /* ===== Espacamento (escala 4px) ===== */ --fc-sp-1: 4px; --fc-sp-2: 8px; --fc-sp-3: 12px; --fc-sp-4: 16px; --fc-sp-5: 24px; --fc-sp-6: 32px; --fc-sp-7: 48px; --fc-sp-8: 64px; /* ===== Radius ===== */ --fc-radius-sm: 6px; --fc-radius: 8px; --fc-radius-md: 10px; --fc-radius-lg: 12px; --fc-radius-xl: 16px; --fc-radius-full: 999px; /* ===== Sombras (4 niveis) ===== */ --fc-shadow-1: 0 1px 2px rgba(22, 24, 29, 0.05); --fc-shadow-2: 0 2px 8px rgba(22, 24, 29, 0.08); --fc-shadow-3: 0 8px 24px rgba(22, 24, 29, 0.12); --fc-shadow-4: 0 16px 48px rgba(22, 24, 29, 0.18); /* ===== Motion ===== */ --fc-dur-fast: 150ms; --fc-dur: 250ms; --fc-dur-slow: 400ms; --fc-ease: cubic-bezier(0.4, 0, 0.2, 1); --fc-ease-out: cubic-bezier(0, 0, 0.2, 1); --fc-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* ===== Z-index ===== */ --fc-z-sidebar: 100; --fc-z-appbar: 90; --fc-z-dropdown: 200; --fc-z-dialog: 300; --fc-z-snackbar: 400; --fc-z-tooltip: 500; /* ===== Auxiliares derivados ===== */ --fc-shimmer: rgba(255, 255, 255, 0.55); --fc-scrim: rgba(0, 0, 0, 0.45); --fc-logo-mark: #3051F5; } /* ============================================================ TEMA ESCURO — derivacao documentada (o manual so define o claro). O azul #3051F5 puro NAO atinge AA como texto sobre #14161A. Botoes filled continuam azul-marca com texto branco; texto/links/ icones azuis usam --fc-link (#6B8AFF). ============================================================ */ [data-theme="dark"] { --fc-primary: #3051F5; --fc-primary-hover: #4D6BFF; --fc-primary-active: #6B8AFF; --fc-primary-soft: rgba(107, 138, 255, 0.12); --fc-bg: #14161A; --fc-surface: #1C1F26; --fc-surface-alt: #232730; --fc-text: #FAFBFE; --fc-text-secondary: #C6CDD9; --fc-text-muted: #A0A8B6; --fc-border: #30353F; --fc-border-strong: #454B58; --fc-link: #B7C6FF; /* Cores de acento (marca, status, motivo) claras no dark — destacam bem do fundo escuro. A identidade da cor vem do fundo da pílula (tint). */ --fc-success: #BBF3CC; --fc-success-bg: rgba(74, 222, 128, 0.18); --fc-warning: #FCEAA3; --fc-warning-bg: rgba(251, 191, 36, 0.18); --fc-danger: #FACBCB; --fc-danger-bg: rgba(248, 113, 113, 0.18); --fc-info: #C8E0FE; --fc-info-bg: rgba(96, 165, 250, 0.18); --fc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --fc-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4); --fc-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5); --fc-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.6); --fc-shimmer: rgba(255, 255, 255, 0.07); --fc-scrim: rgba(0, 0, 0, 0.6); /* Logo no dark usa o mesmo azul clareado do texto/links da marca. */ --fc-logo-mark: #6B8AFF; }