/** * Design System — Base Tokens * * WHY tokens instead of hardcoded values: * 1. Single source of truth — change once, propagate everywhere * 2. Theme switching — dark mode, brand variants, white-label * 3. Consistency — no "is this #333 or #3a3a3a?" debates * 4. Documentation — the token name IS the documentation * * HOW TO USE: * - Import this file in your base layout or Tailwind config * - Reference tokens as: var(--color-bg-primary) * - Override per-project by redefining the custom properties * * CUSTOMIZATION: * - Override in a project-specific CSS file loaded AFTER this one * - Or use Tailwind's theme.extend with these values */ :root { /* ═══════════════════════════════════════════ COLOR SYSTEM — Light Theme (default) ═══════════════════════════════════════════ */ /* Backgrounds — layered from deepest to surface */ --color-bg-primary: #f8f9fa; /* Page background */ --color-bg-secondary: #ffffff; /* Cards, panels, elevated surfaces */ --color-bg-tertiary: #f4f4f5; /* Nested elements, code blocks, wells */ --color-bg-inverse: #18181b; /* Inverted sections, tooltips */ /* Text — high to low emphasis */ --color-text-primary: #09090b; /* Headings, primary content */ --color-text-secondary: #3f3f46; /* Body text */ --color-text-tertiary: #71717a; /* Captions, placeholders, timestamps */ --color-text-inverse: #fafafa; /* On inverse backgrounds */ --color-text-on-accent: #ffffff; /* On accent-colored backgrounds */ /* Borders */ --color-border-default: #e4e4e7; /* Subtle separators */ --color-border-strong: #a1a1aa; /* Emphasized borders, inputs */ --color-border-focus: #5A4FE8; /* Focus ring (matches accent) */ /* Accent — Primary action color Indigo (padrão visual ux-novo-padrao, 2026-07-21). Era #3498db. Pareia com o navy do sidebar (--sidebar-bg) sem competir com ele. */ --color-accent-primary: #5A4FE8; /* Buttons, links, active indicators */ --color-accent-hover: #4A3FD1; /* Hover state — darker for contrast */ --color-accent-subtle: #EEECFE; /* Tinted backgrounds, selected rows */ --color-accent-rgb: 90 79 232; /* For rgb() with opacity */ /* Semantic — Status colors (aligned with project palette) */ --color-success: #2ecc71; /* Positive: saved, complete, online */ --color-success-subtle: #eafaf1; --color-warning: #f39c12; /* Caution: pending, expiring */ --color-warning-subtle: #fef9e7; --color-error: #e74c3c; /* Negative: failed, invalid, offline */ --color-error-subtle: #fdedec; --color-info: #3498db; /* Informational: tips, updates — segue azul (≠ accent) */ --color-info-subtle: #ebf5fb; /* ═══════════════════════════════════════════ SPACING SCALE — 4px base WHY 4px: Aligns with browser defaults (16px base / 4 = 4px). Creates harmony at every level. 8px grid is too coarse for fine UI; 4px gives both fine and coarse options. ═══════════════════════════════════════════ */ --space-0: 0; --space-px: 1px; --space-0_5: 2px; --space-1: 4px; --space-1_5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ═══════════════════════════════════════════ BORDER RADIUS WHY this scale: sm for inputs/badges, md for cards, lg for panels, xl for hero cards, full for pills/avatars. ═══════════════════════════════════════════ */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ═══════════════════════════════════════════ SHADOWS / ELEVATION WHY layered shadows: Single shadows look flat. Two layers — ambient (soft, wide) + direct (tight, sharp) — create depth that mimics real-world lighting. ═══════════════════════════════════════════ */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); /* ═══════════════════════════════════════════ Z-INDEX SCALE WHY defined scale: Prevents z-index wars (z-index: 99999). Each layer has a purpose and a range. ═══════════════════════════════════════════ */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-popover: 50; --z-toast: 60; --z-tooltip: 70; --z-max: 100; } /* ═══════════════════════════════════════════ DARK THEME WHY dark-first: Most modern products ship dark mode. Dark reduces eye strain, saves battery on OLED, and looks more premium. Light mode is the adaptation. ═══════════════════════════════════════════ */ [data-bs-theme="dark"] { --color-bg-primary: #212529; --color-bg-secondary: #343a40; --color-bg-tertiary: #495057; --color-bg-inverse: #f8f9fa; --color-text-primary: #f8f9fa; --color-text-secondary: #a1a1aa; --color-text-tertiary: #71717a; --color-text-inverse: #212529; --color-text-on-accent: #ffffff; --color-border-default: #495057; --color-border-strong: #6c757d; --color-border-focus: #8B7FFF; /* Indigo clareado para contraste sobre fundo escuro (ux-novo-padrao, 2026-07-21) */ --color-accent-primary: #8B7FFF; --color-accent-hover: #A79DFF; --color-accent-subtle: rgba(139, 127, 255, 0.18); --color-accent-rgb: 139 127 255; --color-success-subtle: rgba(46, 204, 113, 0.15); --color-warning-subtle: rgba(243, 156, 18, 0.15); --color-error-subtle: rgba(231, 76, 60, 0.15); --color-info-subtle: rgba(52, 152, 219, 0.15); --color-info: #5dade2; /* Dark mode: use colored glows instead of black shadows */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5); --shadow-glow: 0 0 20px rgb(var(--color-accent-rgb) / 0.15); }