/* SCAR — design tokens. Light + dark via [data-bs-theme="dark"]. */ :root { /* Cor — base neutra (zinc/slate) */ --scar-bg: #f4f4f5; --scar-surface: #ffffff; --scar-surface-alt: #f8fafc; --scar-border: #e4e4e7; --scar-border-strong: #d4d4d8; --scar-text: #18181b; --scar-text-muted: #6b7280; --scar-text-subtle: #374151; /* Cor — marca / status */ --scar-primary: #059669; --scar-primary-soft: #d1fae5; --scar-primary-text: #065f46; --scar-warning: #d97706; --scar-warning-soft: #fef3c7; --scar-warning-text: #92400e; --scar-danger: #dc2626; --scar-danger-soft: #fee2e2; --scar-danger-text: #991b1b; --scar-info: #2563eb; --scar-info-soft: #dbeafe; --scar-info-text: #1e40af; --scar-neutral-soft: #e4e4e7; --scar-neutral-text: #3f3f46; /* Tipografia */ --scar-font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --scar-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --scar-text-xs: 12px; --scar-text-sm: 14px; --scar-text-md: 16px; --scar-text-lg: 20px; --scar-text-xl: 24px; --scar-text-2xl: 32px; /* Espaçamento */ --scar-space-1: 4px; --scar-space-2: 8px; --scar-space-3: 12px; --scar-space-4: 16px; --scar-space-5: 24px; --scar-space-6: 32px; --scar-space-7: 48px; /* Raios */ --scar-radius-sm: 4px; --scar-radius-md: 8px; --scar-radius-lg: 12px; --scar-radius-xl: 16px; /* Sombras */ --scar-shadow-sm: 0 1px 2px rgba(24,24,27,.06); --scar-shadow-md: 0 4px 10px rgba(24,24,27,.08); --scar-shadow-lg: 0 10px 24px rgba(24,24,27,.12); /* z-index */ --scar-z-dropdown: 1000; --scar-z-sticky: 1020; --scar-z-modal-backdrop: 1040; --scar-z-modal: 1050; --scar-z-toast: 1080; /* Densidade (padrão: comfortable). Alternar via data-scar-density="compact" no . */ --scar-card-pad: 22px; --scar-row-pad-y: 13px; --scar-row-pad-x: 16px; } [data-scar-density="compact"] { --scar-card-pad: 14px; --scar-row-pad-y: 8px; --scar-row-pad-x: 12px; } [data-bs-theme="dark"] { --scar-bg: #0f172a; --scar-surface: #1e293b; --scar-surface-alt: #111827; --scar-border: #334155; --scar-border-strong: #475569; --scar-text: #f1f5f9; --scar-text-muted: #94a3b8; --scar-text-subtle: #cbd5e1; --scar-primary: #34d399; --scar-primary-soft: #064e3b; --scar-primary-text: #a7f3d0; --scar-warning: #fbbf24; --scar-warning-soft: #451a03; --scar-warning-text: #fde68a; --scar-danger: #f87171; --scar-danger-soft: #450a0a; --scar-danger-text: #fecaca; --scar-info: #60a5fa; --scar-info-soft: #0c2d55; --scar-info-text: #bfdbfe; --scar-neutral-soft: #334155; --scar-neutral-text: #e2e8f0; --scar-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --scar-shadow-md: 0 4px 10px rgba(0,0,0,.5); --scar-shadow-lg: 0 10px 24px rgba(0,0,0,.6); }