/* === LIDERE DESIGN TOKENS === * Carregado globalmente em via header.ejs. Tokens neutros — não * estilizam nada por si só. Consumido por sidebar-admin.css (T3) e pelos * módulos .tk (chamados). * * Dark mode via [data-theme="dark"] no : * - v1: sidebar + chrome (admin/cliente). * - v2 (atual): conteúdo do CLIENTE coberto (listagem, form, detalhe, * partials timeline/anexos) — overrides em style.css em * `[data-theme="dark"] body.role-client`. Painel Retainer mantém light. * - admin/supportagent: chrome dark + conteúdo light (fase 3). */ :root { /* color: base (light) */ --color-bg: #f5f6f8; --color-surface: #ffffff; --color-surface-2: #fafbfc; --color-surface-elevated: #ffffff; --color-border: #e3e5e8; --color-border-strong: #c9ccd1; --color-text: #1c1f24; --color-text-muted: #5b6370; /* subido de #6b7280 pra WCAG AA pass */ --color-text-subtle: #9aa0a6; /* brand */ --color-primary: #0a5fb4; --color-primary-hover: #0850a0; --color-primary-soft: #e8f0fa; --color-text-on-soft: #0a4e96; /* label ativa em pill */ /* states */ --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #2563eb; /* state softs (bg para flash / banner / chip — light) */ --color-success-soft: #ecfdf5; --color-success-border: #a7f3d0; --color-success-text: #065f46; --color-warning-soft: #fef3c7; --color-warning-border: #facc15; --color-warning-text: #92400e; --color-danger-soft: #fef2f2; --color-danger-border: #fecaca; --color-danger-text: #7f1d1d; --color-info-soft: #eff6ff; --color-info-border: #bfdbfe; --color-info-text: #1e40af; /* typography */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; /* base sidebar */ --fs-base: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 18px; --lh-tight: 1.2; --lh-normal: 1.45; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* spacing 4-base */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* radius */ --rad-sm: 4px; --rad-md: 6px; --rad-lg: 8px; --rad-xl: 12px; --rad-pill: 999px; /* shadow */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); /* motion */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* sidebar dims */ --sidebar-w: 248px; --sidebar-label-size: 13px; --sidebar-label-weight: 400; --sidebar-label-weight-active: 500; } [data-theme="dark"] { --color-bg: #0d1117; --color-surface: #1c2128; /* delta L ~12 vs bg pra surface visível */ --color-surface-2: #22272e; --color-surface-elevated: #2d333b; --color-border: #30363d; --color-border-strong: #444c56; --color-text: #e6e8eb; --color-text-muted: #9da7b3; --color-text-subtle: #6e7681; --color-primary: #58a6ff; /* menos saturado pra texto pequeno */ --color-primary-hover: #79b8ff; --color-primary-soft: #1f3a5f; --color-text-on-soft: #79b8ff; /* state softs em dark — bg dessaturados sobre surface, texto claro */ --color-success: #4ade80; --color-success-soft: #10331f; --color-success-border: #1f6b3a; --color-success-text: #86efac; --color-warning: #fbbf24; --color-warning-soft: #3a2a0c; --color-warning-border: #7a5413; --color-warning-text: #fcd34d; --color-danger: #f87171; --color-danger-soft: #3a1414; --color-danger-border: #7f1d1d; --color-danger-text: #fca5a5; --color-info: #60a5fa; --color-info-soft: #1a2c4d; --color-info-border: #2a4a7a; --color-info-text: #93c5fd; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } .theme-transitioning, .theme-transitioning * { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out) !important; }