/* GERADO por scripts/build.mjs a partir de tokens/tokens.json — NÃO EDITE À MÃO. Design System Elo Partner v0.1.0. :root traz a escala da marca, os tokens de layout e, como padrão, o tema ESCURO (a tela de login/boot precisa da marca antes de qualquer JS rodar). [data-tema="claro"|"escuro"] no troca as variáveis semânticas. aplicarTema() (dist/tokens.js) escreve as mesmas variáveis inline — os dois caminhos são equivalentes; o inline vence quando os dois existem. */ :root { /* ---- escala da marca ---- */ --elo-navy-500: #1F3555; --elo-navy-600: #12314F; --elo-navy-700: #0B1E38; --elo-navy-800: #071B33; --elo-navy-850: #001634; --elo-navy-900: #03152C; --elo-navy-950: #020E1F; --elo-gold-200: #F5BF99; --elo-gold-300: #EDD696; --elo-gold-400: #D3AB6A; --elo-gold-500: #C9A05C; --elo-gold-700: #AC824B; --elo-gold-900: #7A5A2B; --elo-orange-500: #F07921; --elo-orange-600: #D9650F; --elo-orange-700: #AF550E; --elo-blue-300: #7FCAFE; --elo-blue-400: #42BFFB; --elo-blue-500: #2799EA; --elo-blue-600: #1585DB; --elo-blue-700: #1170B3; --elo-blue-teal: #1A9BC9; --elo-purple-200: #CEB6F7; --elo-purple-300: #B07CF5; --elo-purple-500: #893CCE; --elo-purple-600: #5609C7; --elo-slate-300: #9FB0C7; --elo-slate-500: #5C6E8C; --elo-slate-600: #4C5B73; --elo-neutro-50: #F5F7FB; --elo-neutro-100: #F3F6FB; --elo-neutro-150: #EEF2F8; --elo-neutro-200: #E2E8F1; --elo-neutro-250: #DCE3EE; --elo-neutro-branco: #FFFFFF; --elo-neutro-preto: #000000; --elo-medalha-ouro: #D4AF37; --elo-medalha-prata: #9EA7B3; --elo-medalha-bronze: #B08D57; --elo-impressao-texto: #000000; --elo-impressao-regua: #888888; --elo-impressao-regua-clara: #BBBBBB; --elo-estado-verde-claro-tema: #297C4D; --elo-estado-verde-escuro-tema: #38AA6A; --elo-estado-vermelho-claro-tema: #C0392B; --elo-estado-vermelho-escuro-tema: #DF7C71; --elo-estado-ok-claro: #1F7047; --elo-estado-alerta-claro: #855A00; --elo-estado-ruim-claro: #B23327; --elo-estado-info-claro: #216691; --elo-estado-aviso-claro: #A34300; --elo-estado-ok-escuro: #3FB073; --elo-estado-alerta-escuro: #FFB020; --elo-estado-ruim-escuro: #F37866; --elo-estado-info-escuro: #5DADE2; --elo-estado-aviso-escuro: #E67E22; /* ---- fixos, tipografia e layout (iguais nos dois temas) ---- */ --branco: #FFFFFF; --amarelo: #E0C896; --verde-fixo: #2E8B57; --vermelho-fixo: #C0392B; --verde-claro: #7FD6A4; --vermelho-claro: #FF9A8D; --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --r-xs: 7px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px; --dur-1: .16s; --dur-2: .28s; --ease: cubic-bezier(.4, 0, .2, 1); --lateral: 268px; --sidebar-w: 292px; --kpi-min: 172px; --login-bg: #03152C; --login-halo: radial-gradient(1200px 620px at 82% -8%, color-mix(in srgb, #EDD696 12%, transparent) 0%, transparent 60%), radial-gradient(1000px 560px at -6% 4%, color-mix(in srgb, #42BFFB 12%, transparent) 0%, transparent 55%); --login-card-grad: linear-gradient(160deg, color-mix(in srgb, #12314F 88%, transparent) 0%, color-mix(in srgb, #0B1E38 92%, transparent) 70%); --login-input-bg: #071B33; --login-borda: #1F3555; --login-texto: #F5F7FB; --login-label: #9FB0C7; --login-accent: #EDD696; --login-titulo: #EDD696; --boot-grad: radial-gradient(1100px 600px at 50% 28%, #0B1E38 0%, #03152C 66%); --swatch-claro-a: #FFFFFF; --swatch-claro-b: #001634; --swatch-escuro-a: #EDD696; --swatch-escuro-b: #03152C; /* ---- tema padrão: escuro ---- */ --primaria: #EDD696; --secundaria: #F07921; --terciaria: #F5BF99; --destaque: #42BFFB; --fundo-app: #03152C; --fundo-card: #0B1E38; --fundo-card-alt: #12314F; --texto-valor: #F5F7FB; --texto-label: #9FB0C7; --borda: #1F3555; --texto-dentro-barra: #03152C; --texto-sobre-destaque: #03152C; --header-grad: linear-gradient(100deg, #0B1E38 0%, #12314F 60%, #1F3555 100%); --sidebar-grad: linear-gradient(180deg, #071B33 0%, #03152C 60%, #020E1F 100%); --accent: #EDD696; --accent-text: #03152C; --accent-ink: #EDD696; --ov-accent: #EDD696; --input-bg: #071B33; --ring-bg: #0B1E38; --verde: #38AA6A; --vermelho: #DF7C71; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23EDD696' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --ok: #3FB073; --alerta: #FFB020; --ruim: #F37866; --info: #5DADE2; --aviso: #E67E22; --shadow-1: 0 1px 2px rgba(0, 0, 0, .45); --shadow-2: 0 6px 20px rgba(0, 0, 0, .40), 0 2px 6px rgba(0, 0, 0, .30); --shadow-3: 0 18px 46px rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .38); --glass-bg: rgba(11, 30, 56, .68); --glass-brd: rgba(255, 255, 255, .09); --sheen: rgba(255, 255, 255, .05); --accent-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 6px 20px color-mix(in srgb, var(--accent) 28%, transparent); --logo: url("/logo-elo-escuro.png"); --grafico-1: #42BFFB; --grafico-2: #EDD696; --grafico-3: #B07CF5; --grafico-4: #F5BF99; --grafico-5: #2799EA; --grafico-6: #F07921; --grafico-7: #CEB6F7; --grafico-8: #D3AB6A; } :root[data-tema="claro"] { --primaria: #001634; --secundaria: #1585DB; --terciaria: #5C6E8C; --destaque: #AC824B; --fundo-app: #EEF2F8; --fundo-card: #FFFFFF; --fundo-card-alt: #F3F6FB; --texto-valor: #001634; --texto-label: #4C5B73; --borda: #DCE3EE; --texto-dentro-barra: #FFFFFF; --texto-sobre-destaque: #001634; --header-grad: linear-gradient(100deg, #001634 0%, #0B1E38 55%, #12314F 100%); --sidebar-grad: linear-gradient(180deg, #001634 0%, #03152C 55%, #020E1F 100%); --accent: #001634; --accent-text: #FFFFFF; --accent-ink: #7A5A2B; --ov-accent: #C9A05C; --input-bg: #FFFFFF; --ring-bg: #FFFFFF; --verde: #297C4D; --vermelho: #C0392B; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23001634' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --ok: #1F7047; --alerta: #855A00; --ruim: #B23327; --info: #216691; --aviso: #A34300; --shadow-1: 0 1px 2px rgba(0, 22, 52, .06), 0 1px 3px rgba(0, 22, 52, .08); --shadow-2: 0 6px 18px rgba(0, 22, 52, .09), 0 2px 6px rgba(0, 22, 52, .06); --shadow-3: 0 18px 44px rgba(0, 22, 52, .16), 0 6px 16px rgba(0, 22, 52, .08); --glass-bg: rgba(255, 255, 255, .72); --glass-brd: rgba(0, 22, 52, .08); --sheen: rgba(255, 255, 255, .70); --accent-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 6px 20px color-mix(in srgb, var(--accent) 26%, transparent); --logo: url("/logo-elo-escuro.png"); --grafico-1: #001634; --grafico-2: #1A9BC9; --grafico-3: #D9650F; --grafico-4: #1585DB; --grafico-5: #AC824B; --grafico-6: #5609C7; --grafico-7: #4C5B73; --grafico-8: #893CCE; } :root[data-tema="escuro"] { --primaria: #EDD696; --secundaria: #F07921; --terciaria: #F5BF99; --destaque: #42BFFB; --fundo-app: #03152C; --fundo-card: #0B1E38; --fundo-card-alt: #12314F; --texto-valor: #F5F7FB; --texto-label: #9FB0C7; --borda: #1F3555; --texto-dentro-barra: #03152C; --texto-sobre-destaque: #03152C; --header-grad: linear-gradient(100deg, #0B1E38 0%, #12314F 60%, #1F3555 100%); --sidebar-grad: linear-gradient(180deg, #071B33 0%, #03152C 60%, #020E1F 100%); --accent: #EDD696; --accent-text: #03152C; --accent-ink: #EDD696; --ov-accent: #EDD696; --input-bg: #071B33; --ring-bg: #0B1E38; --verde: #38AA6A; --vermelho: #DF7C71; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23EDD696' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --ok: #3FB073; --alerta: #FFB020; --ruim: #F37866; --info: #5DADE2; --aviso: #E67E22; --shadow-1: 0 1px 2px rgba(0, 0, 0, .45); --shadow-2: 0 6px 20px rgba(0, 0, 0, .40), 0 2px 6px rgba(0, 0, 0, .30); --shadow-3: 0 18px 46px rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .38); --glass-bg: rgba(11, 30, 56, .68); --glass-brd: rgba(255, 255, 255, .09); --sheen: rgba(255, 255, 255, .05); --accent-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 6px 20px color-mix(in srgb, var(--accent) 28%, transparent); --logo: url("/logo-elo-escuro.png"); --grafico-1: #42BFFB; --grafico-2: #EDD696; --grafico-3: #B07CF5; --grafico-4: #F5BF99; --grafico-5: #2799EA; --grafico-6: #F07921; --grafico-7: #CEB6F7; --grafico-8: #D3AB6A; } /* movimento reduzido (WCAG 2.3.3) — vale para todo consumidor dos tokens */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: .001ms; --dur-2: .001ms; } }