/* ═══════════════════════════════════════════════════════════════════════════ M7 Service Desk — TOKENS do Design System M7 (fonte única de verdade) Valores EXATOS do Dashboard M7 (web/src/lib/theme.js + web/src/styles.css). Nenhum componente deve usar cor, fonte, raio ou sombra literal: tudo sai daqui. Temas (mesmos do Dashboard M7), escolhidos por : escuro = "Escuro Laranja" (padrão) · claro = "Claro Azul" Breakpoints da origem (CSS não aceita var() em @media — use estes valores): 1440 · 1400 · 1100 (sidebar vira gaveta) · 900 · 720 · 480 ═══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* ── Cores do tema (escuro_laranja — theme.js) ── */ --primaria: #FF7A2F; --secundaria: #FF9354; --terciaria: #FFB587; --destaque: #FFD56B; --fundo-app: #0B0D12; --fundo-card: #15181F; --fundo-card-alt: #1E222B; --texto-valor: #F5F7FB; --texto-label: #9AA2B1; --borda: #2A2F3A; --texto-dentro-barra: #0B0D12; --header-grad: linear-gradient(100deg, #171B22 0%, #1E232C 60%, #262C37 100%); --sidebar-grad: linear-gradient(180deg, #12151B 0%, #0C0E13 60%, #070809 100%); /* accent = cor viva p/ contextos escuros: laranja no escuro, dourado no claro */ --accent: #FF7A2F; --ov-accent: var(--accent); --accent-text: #0A0A0A; --accent-ink: var(--accent); --verde: #2E8B57; --vermelho: #C0392B; --amarelo: #E0C896; --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='%23FF7A2F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); /* régua de status (semáforo) — contraste AA no tema */ --st-ok: #3FB073; --st-alerta: #E0C896; --st-ruim: #F1654F; --st-info: #5DADE2; --st-aviso: #E67E22; /* paleta de dados/gráficos (paleta_graficos) */ --chart-1: #FF7A2F; --chart-2: #FF9354; --chart-3: #FFB587; --chart-4: #FFD1B3; --chart-5: #FFD56B; --chart-6: #E66A1F; --chart-7: #A8552A; --chart-8: #FFA66B; /* ── Tipografia ── */ --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-chart: Montserrat, Inter, 'Segoe UI', sans-serif; --font-mono: Consolas, 'SFMono-Regular', Menlo, monospace; /* ── Raios ── */ --r-xs: 7px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px; /* ── Movimento ── */ --dur-1: .16s; --dur-2: .28s; --ease: cubic-bezier(.4, 0, .2, 1); /* ── Sombras / vidro (tema escuro) ── */ --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(21, 24, 31, .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); --ring-bg: var(--fundo-card, #15181F); /* anel de foco (WCAG 2.4.7 / 1.4.11): accent no escuro; no claro, marinho (o dourado da origem dá só 2,5:1) */ --focus-ring: var(--accent); /* ── Superfícies escuras fixas (sidebar e header em gradiente, nos 2 temas) ── */ --on-dark: #fff; --on-dark-soft: rgba(255, 255, 255, .86); --on-dark-muted: rgba(255, 255, 255, .55); --dark-hover: rgba(255, 255, 255, .08); --dark-line: rgba(255, 255, 255, .12); --dark-edge: rgba(255, 255, 255, .06); --dark-field: rgba(255, 255, 255, .06); --dark-field-brd: rgba(255, 255, 255, .18); --dark-field-brd-hover: rgba(255, 255, 255, .34); --dark-field-focus: rgba(255, 255, 255, .10); --hd-ctl-bg: rgba(255, 255, 255, .12); --hd-ctl-bg-hover: rgba(255, 255, 255, .2); --hd-ctl-brd: rgba(255, 255, 255, .2); --hd-ctl-brd-strong: rgba(255, 255, 255, .22); --hd-edge: rgba(255, 255, 255, .08); --on-destaque: #1A2136; --sidebar-shadow: 4px 0 24px rgba(0, 0, 0, .18); --tema-ring: rgba(255, 255, 255, .82); --tema-ring-shadow: 0 0 0 1px rgba(0, 0, 0, .30), 0 1px 4px rgba(0, 0, 0, .35); --tema-ring-active: 0 0 0 1px rgba(0, 0, 0, .30), 0 0 0 3px rgba(255, 255, 255, .5), 0 1px 6px rgba(0, 0, 0, .4); --tema-claro-swatch: linear-gradient(135deg, #FFF 0%, #FFF 49%, #2D3755 51%, #2D3755 100%); --tema-escuro-swatch: linear-gradient(135deg, #FF7A2F 0%, #FF7A2F 49%, #0B0D12 51%, #0B0D12 100%); /* ── Sobreposições ── */ --scrim: rgba(6, 8, 12, .58); --scrim-soft: rgba(6, 8, 12, .52); /* ── Tela de entrada (boot/login) — sempre escura, como na origem ── */ --boot-bg: radial-gradient(1100px 600px at 50% 28%, #1a1e28 0%, #0b0d12 66%); --boot-text: #EDEFF4; --boot-logo-shadow: drop-shadow(0 8px 30px rgba(0, 0, 0, .5)); --login-card-bg: linear-gradient(160deg, rgba(29, 34, 44, .88) 0%, rgba(21, 24, 31, .92) 70%); --login-card-brd: rgba(255, 255, 255, .1); --login-field-bg: #0e1015; --login-field-brd: #2a2f3a; --login-label: #9AA2B1; --login-erro-text: #ff9a8d; --login-aviso-text: #7fd6a4; /* ── Camadas (z-index usados na origem) ── */ --z-header: 40; --z-popover: 60; --z-scrim: 99; --z-sidebar: 100; --z-modal: 200; --z-toast: 210; --z-skip: 400; /* ── Avatares (cores de identificação de usuário/fila: paleta da marca) ── */ --avatar-1: #FF7A2F; --avatar-2: #4C5878; --avatar-3: #2E8B57; --avatar-4: #B8933F; --avatar-5: #C0392B; --avatar-6: #FF9354; --avatar-7: #7E8AA8; --avatar-8: #2D3755; --brand-laranja: #FF7A2F; /* ══ Aliases semânticos usados pelo Service Desk → tokens da origem ══ */ --bg: var(--fundo-app); --surface: var(--fundo-card); --surface2: var(--fundo-card-alt); --surface3: color-mix(in srgb, var(--texto-label) 14%, var(--fundo-card-alt)); --border: var(--borda); --text: var(--texto-valor); --muted: var(--texto-label); --accent2: var(--secundaria); --on-accent: var(--accent-text); --gold: var(--destaque); --gold-ink: var(--destaque); --on-gold: var(--on-destaque); --success: var(--verde); --success-ink: var(--st-ok); --danger: var(--vermelho); --danger-ink: var(--st-ruim); --warning: var(--st-alerta); --info: var(--st-info); --font-head: var(--font-display); --hero-accent: var(--ov-accent); } /* ── Tema CLARO ("Claro Azul": marinho + dourado) ── */ :root[data-tema="claro"] { color-scheme: light; --primaria: #2D3755; --secundaria: #4C5878; --terciaria: #7E8AA8; --destaque: #B8933F; --fundo-app: #EAEEF6; --fundo-card: #FFFFFF; --fundo-card-alt: #F1F5FB; --texto-valor: #232C46; --texto-label: #586579; --borda: #E2E8F1; --texto-dentro-barra: #FFFFFF; --header-grad: linear-gradient(100deg, #2D3755 0%, #3C486A 55%, #4C5878 100%); --sidebar-grad: linear-gradient(180deg, #2D3755 0%, #232C46 55%, #1A2136 100%); --accent: #B8933F; --accent-ink: #7A5E1F; --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='%232D3755' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --st-ok: #1F7047; --st-alerta: #855A00; --st-ruim: #B23327; --st-info: #216691; --st-aviso: #A34300; --chart-1: #2D3755; --chart-2: #4C5878; --chart-3: #7E8AA8; --chart-4: #A3ABBF; --chart-5: #C9A961; --chart-6: #A88B4F; --chart-7: #5C6884; --chart-8: #E0C896; --shadow-1: 0 1px 2px rgba(20, 30, 55, .06), 0 1px 3px rgba(20, 30, 55, .08); --shadow-2: 0 6px 18px rgba(20, 30, 55, .09), 0 2px 6px rgba(20, 30, 55, .06); --shadow-3: 0 18px 44px rgba(20, 30, 55, .16), 0 6px 16px rgba(20, 30, 55, .08); --glass-bg: rgba(255, 255, 255, .72); --glass-brd: rgba(20, 30, 55, .08); --sheen: rgba(255, 255, 255, .70); --accent-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 6px 18px color-mix(in srgb, var(--accent) 26%, transparent); --ring-bg: #FFFFFF; /* dourado como TEXTO precisa do tom escuro (AA sobre branco) */ --gold-ink: var(--accent-ink); --focus-ring: var(--primaria); }