/* Triune AV Planner — Design System Tokens Paleta dark = padrão. [data-theme="light"] no alterna pra clara. Tipografia: Inter (corpo) + JetBrains Mono (dados técnicos: IDs, comprimentos, fabricantes uppercase, números). Cores de cabo do §6 da spec — usadas em portas, conexões e legenda. */ :root { /* tipografia */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* DARK (padrão) */ --red: #DD2A1B; --red-soft: rgba(221, 42, 27, 0.12); --red-line: rgba(221, 42, 27, 0.25); --bg: #0E1418; --bg-2: #101820; --bg-3: #1A2430; --bg-deep: #0B1016; /* para "afundar" áreas (preview de canvas, headers de card) */ --line: #2A3540; --line-2: #1E2D3A; --line-3: #232b33; --txt: #FFFFFF; --txt-2: #DEE3EB; --txt-3: #8A9BB0; --txt-4: #5d6b7d; /* labels uppercase, hints discretos */ --ok: #2ECC71; --warn: #F39C12; --info: #3498DB; --err: #DD2A1B; /* cabos */ --c-hdmi: #9B59B6; --c-sdi: #3498DB; --c-xlr: #2ECC71; --c-usb: #F39C12; --c-net: #1ABC9C; --c-dmx: #E74C3C; --c-dp: #8E44AD; --c-fiber: #ECF0F1; --c-trs: #F1C40F; --c-speakon: #E67E22; --c-power: #E67E22; /* raios */ --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 14px; /* espaços */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; /* sombras */ --sh-1: 0 1px 2px rgba(0,0,0,.2); --sh-2: 0 4px 16px rgba(0,0,0,.25); --sh-3: 0 24px 60px rgba(0,0,0,.45); } [data-theme="light"] { --red: #DD2A1B; --red-soft: #FBEAE8; --red-line: #F3C9C4; --bg: #F4F6F9; --bg-2: #FFFFFF; --bg-3: #EEF1F5; --bg-deep: #E8ECF1; --line: #DDE3EB; --line-2: #E8ECF1; --line-3: #DDE3EB; --txt: #0E1418; --txt-2: #2C2522; --txt-3: #6B7785; --txt-4: #97A2AE; --ok: #1F9D57; --warn: #C77A0A; --info: #2C7BE5; --err: #DD2A1B; --sh-1: 0 1px 2px rgba(14,20,24,.06); --sh-2: 0 4px 16px rgba(14,20,24,.10); --sh-3: 0 18px 50px rgba(14,20,24,.18); } /* Ajustes finais pro light onde rgba(255,255,255,.xx) sumiria no fundo claro. Substitui por rgba(0,0,0,.xx) — sutil, mas visível. */ [data-theme="light"] .eq-avatar, [data-theme="light"] .fr-ico, [data-theme="light"] .hlp-ico, [data-theme="light"] .dash-stat-ico { background: rgba(0,0,0,0.04); } /* Canvas no light: cards no fundo claro precisam de borda mais visível pra se separarem. Os defaults usam var(--line) que já fica adequada. */ [data-theme="light"] .cv-stage { background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px); } /* Builder preview: o card preto fica forte no light — suaviza pra cinza escuro */ [data-theme="light"] .bld-prev-card { background: #1a1a1a; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } /* utilitário pra texto monoespaçado (números, IDs, comprimentos) */ .mono { font-family: var(--font-mono); }