/* ======================================================================= Design System — tokens globais ======================================================================= Fonte única de cor, tipografia, espaçamento, raio e sombra. Este arquivo APENAS declara variáveis: incluí-lo não muda nenhum pixel. Quem consome são os componentes (ui.css) e, aos poucos, os CSS de área. Os valores partem do que o sistema já usava, para a padronização não virar repintura: a primária é o azul do Bootstrap, o cinza de texto é o #6c757d (que absorve o #6b7280 vindo do outro dialeto) e o verde é o #198754 (que absorve o #10b981). ======================================================================= */ :root { /* ---- Cor por papel, não por matiz ---------------------------------- */ --u-primary: #0d6efd; --u-primary-hover: #0b5ed7; --u-primary-ring: rgba(13, 110, 253, .25); --u-success: #198754; --u-warning: #ffc107; --u-danger: #dc3545; --u-info: #0dcaf0; /* ---- Superfície e texto -------------------------------------------- */ --u-bg: #f8f9fa; --u-surface: #ffffff; --u-surface-alt: #f1f3f5; --u-border: #dee2e6; --u-border-soft: #e9ecef; --u-text: #212529; --u-text-muted: #6c757d; --u-text-faint: #adb5bd; /* ---- Acentos decorativos ------------------------------------------- Usados para diferenciar itens de mesma natureza (cards de módulo, séries de gráfico). Não carregam significado de estado — quem comunica sucesso/erro/alerta são as cores de papel acima. ------------------- */ --u-accent-purple: #7c3aed; --u-accent-orange: #f97316; --u-accent-teal: #0d9488; --u-accent-pink: #db2777; --u-accent-indigo: #4f46e5; --u-accent-lime: #65a30d; --u-accent-cyan: #0891b2; --u-accent-amber: #d97706; /* ---- Raio: três degraus no lugar dos dez valores soltos ------------ */ --u-radius-sm: 8px; --u-radius: 12px; --u-radius-pill: 999px; /* ---- Sombra --------------------------------------------------------- */ --u-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08); --u-shadow: 0 4px 12px rgba(15, 23, 42, .10); /* ---- Espaçamento: espelha a escala Bootstrap 1..4 já em uso -------- */ --u-space-1: .25rem; --u-space-2: .5rem; --u-space-3: 1rem; --u-space-4: 1.5rem; /* ---- Tipografia ----------------------------------------------------- */ --u-font: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --u-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; --u-fs-xs: .72rem; --u-fs-sm: .82rem; --u-fs-base: 1rem; --u-fs-lg: 1.15rem; --u-fw-medium: 500; --u-fw-semibold: 600; --u-fw-bold: 700; /* ---- Movimento ------------------------------------------------------ */ --u-transition: .2s ease; /* ---- Breakpoints (referência; media query não lê variável) --------- celular < 576px | tablet 576–991.98px | desktop >= 992px O corte principal do sistema é 767.98px. -------------------------------------------------------------------- */ } /* Modo noturno: o gatilho continua sendo .dark-mode no , aplicado pelo JS do base.html. Aqui só reapontamos os tokens — componentes que consomem variáveis acompanham o tema sem CSS extra. */ .dark-mode { --u-bg: #1a1a1a; --u-surface: #2d2d2d; --u-surface-alt: #252525; --u-border: #404040; --u-border-soft: #363636; --u-text: #e0e0e0; --u-text-muted: #a8a8a8; --u-text-faint: #7a7a7a; --u-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --u-shadow: 0 4px 12px rgba(0, 0, 0, .5); }