/* ========================================================= Lastro — design tokens Única fonte de cores, sombras, raios e espaçamentos. Nenhum outro arquivo deve declarar cores fixas. ========================================================= */ :root { color-scheme: light; /* Marca e estados */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-soft: #eff6ff; --color-on-primary: #ffffff; --color-success: #15803d; --color-success-soft: #f0fdf4; /* danger levemente mais escuro que o vermelho-base para atingir contraste AA (>= 4.5:1) sobre fundos soft */ --color-danger: #d62424; --color-danger-soft: #fef2f2; --color-on-danger: #ffffff; --color-warning: #b45309; --color-warning-soft: #fffbeb; /* Superfícies */ --bg-page: #f6f7f9; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-hover: #f3f4f6; /* Texto */ --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #71717a; /* Bordas e sombras */ --border-default: #e4e4e7; --border-strong: #d4d4d8; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.10); --focus-ring: rgba(37, 99, 235, 0.25); /* Raios */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* Layout */ --sidebar-width: 240px; --content-max: 1320px; --mobile-nav-height: 64px; /* Escala de espaçamento */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* Tipografia */ --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Ponte com Bootstrap 5: faz componentes (modal, dropdown, form-check, pagination...) seguirem os tokens acima. */ --bs-body-font-family: var(--font-sans); --bs-body-bg: var(--bg-page); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-default); --bs-primary: var(--color-primary); --bs-primary-rgb: 37, 99, 235; --bs-link-color: var(--color-primary); --bs-link-hover-color: var(--color-primary-hover); --bs-secondary-color: var(--text-muted); --bs-tertiary-bg: var(--bg-hover); --bs-emphasis-color: var(--text-primary); } /* --------------------------------------------------------- Tema escuro — aplicado via [data-theme] no . O atributo é definido antes da pintura (script inline no ), então nenhum flash de tema ocorre. --------------------------------------------------------- */ html[data-theme="dark"] { color-scheme: dark; --color-primary: #60a5fa; --color-primary-hover: #93c5fd; --color-primary-soft: rgba(59, 130, 246, 0.12); --color-on-primary: #0b1220; --color-success: #4ade80; --color-success-soft: rgba(74, 222, 128, 0.10); --color-danger: #f87171; --color-danger-soft: rgba(248, 113, 113, 0.10); --color-on-danger: #1c0a0a; --color-warning: #fbbf24; --color-warning-soft: rgba(251, 191, 36, 0.10); --bg-page: #09090b; --bg-surface: #111113; --bg-elevated: #18181b; --bg-hover: #202023; --text-primary: #fafafa; --text-secondary: #d4d4d8; --text-muted: #a1a1aa; --border-default: #27272a; --border-strong: #3f3f46; --shadow-card: none; --shadow-pop: 0 4px 20px rgba(0, 0, 0, 0.5); --focus-ring: rgba(96, 165, 250, 0.35); --bs-primary-rgb: 96, 165, 250; }