/* ============================================================================= SB Estates Design Tokens (sb-tokens.css) ----------------------------------------------------------------------------- The single source of truth for the new design system. Loaded only when {{ new_theme }} is true (see core/context_processors.py). Naming convention: --sb-* prefix to avoid collisions with Bootstrap (--bs-*) or Material Dashboard (no consistent prefix). This file defines tokens ONLY. Component styles live in sb-base.css. ========================================================================== */ :root { /* ---------- Brand & primary action ---------- */ --sb-brand: #0f172a; /* Midnight - chrome, sidebar, headings */ --sb-brand-hover: #1e293b; /* Slightly lighter Midnight for hover */ --sb-primary: #10b981; /* Emerald - primary CTAs, active states */ --sb-primary-hover: #059669; /* Darker emerald on hover */ --sb-primary-soft: rgba(16, 185, 129, 0.10); /* Tinted bg for badges/callouts */ --sb-primary-ring: rgba(16, 185, 129, 0.25); /* Focus ring color */ /* ---------- Semantic status colors ---------- */ --sb-success: #10b981; /* Same as primary - Paid, Approved, Ready */ --sb-success-soft: rgba(16, 185, 129, 0.10); --sb-warning: #f59e0b; /* Pending, setup warnings */ --sb-warning-soft: rgba(245, 158, 11, 0.10); --sb-danger: #ef4444; /* Errors, destructive, Setup Required */ --sb-danger-soft: rgba(239, 68, 68, 0.10); --sb-info: #06b6d4; /* Informational callouts */ --sb-info-soft: rgba(6, 182, 212, 0.10); /* ---------- Tailwind Slate neutral scale ---------- */ --sb-gray-50: #f8fafc; --sb-gray-100: #f1f5f9; --sb-gray-200: #e2e8f0; --sb-gray-300: #cbd5e1; --sb-gray-400: #94a3b8; --sb-gray-500: #64748b; --sb-gray-600: #475569; --sb-gray-700: #334155; --sb-gray-800: #1e293b; --sb-gray-900: #0f172a; /* Same as --sb-brand */ /* ---------- Page / surface backgrounds ---------- */ --sb-bg-page: #ffffff; --sb-bg-subtle: var(--sb-gray-50); --sb-bg-muted: var(--sb-gray-100); --sb-surface: #ffffff; --sb-surface-dark: var(--sb-brand); /* ---------- Card surface ---------- Used by sb-topbar, sb-kpi, sb-panel, sb-plan-card, etc. for the elevated card background. Defined explicitly so the property doesn't fall back to `transparent` when the variable is missing (which would make every card, panel, and topbar visually disappear against a white page). */ --sb-bg-card: #ffffff; /* ---------- Text colors ---------- */ --sb-text: var(--sb-gray-900); --sb-text-muted: var(--sb-gray-500); --sb-text-soft: var(--sb-gray-400); --sb-text-on-brand: #ffffff; --sb-text-on-primary: #ffffff; /* ---------- Border colors ---------- */ --sb-border: var(--sb-gray-200); --sb-border-soft: var(--sb-gray-100); --sb-border-strong: var(--sb-gray-300); /* ---------- Typography ---------- */ --sb-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --sb-font-accent: "Newsreader", Georgia, "Times New Roman", serif; --sb-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Font sizes - matching modern SaaS hierarchy */ --sb-text-xs: 0.75rem; /* 12px - small caps, eyebrows, micro labels */ --sb-text-sm: 0.875rem; /* 14px - body small, buttons, table data, form labels */ --sb-text-base: 1rem; /* 16px - body */ --sb-text-lg: 1.125rem; /* 18px - card titles, lead */ --sb-text-xl: 1.25rem; /* 20px - subsection titles */ --sb-text-2xl: 1.5rem; /* 24px - page titles */ --sb-text-3xl: 2rem; /* 32px - section titles */ --sb-text-4xl: 2.5rem; /* 40px - KPI stats */ --sb-text-display: clamp(2.5rem, 5vw, 4rem); /* 40-64px responsive hero */ /* Font weights */ --sb-fw-normal: 400; --sb-fw-medium: 500; --sb-fw-semibold: 600; --sb-fw-bold: 700; --sb-fw-extrabold: 800; /* Line heights */ --sb-leading-tight: 1.2; --sb-leading-snug: 1.35; --sb-leading-normal: 1.5; --sb-leading-relaxed: 1.7; /* Letter spacing */ --sb-tracking-tight: -0.02em; --sb-tracking-normal: 0; --sb-tracking-wide: 0.08em; /* small-caps overlines */ /* ---------- Spacing scale (matches Tailwind, 4px increments) ---------- */ --sb-space-1: 0.25rem; /* 4 */ --sb-space-2: 0.5rem; /* 8 */ --sb-space-3: 0.75rem; /* 12 */ --sb-space-4: 1rem; /* 16 */ --sb-space-5: 1.25rem; /* 20 */ --sb-space-6: 1.5rem; /* 24 */ --sb-space-8: 2rem; /* 32 */ --sb-space-10: 2.5rem; /* 40 */ --sb-space-12: 3rem; /* 48 */ --sb-space-16: 4rem; /* 64 */ --sb-space-20: 5rem; /* 80 */ --sb-space-24: 6rem; /* 96 */ /* ---------- Border radius scale ---------- */ --sb-radius-sm: 6px; /* tight badges, micro elements */ --sb-radius: 10px; /* buttons, inputs, chips */ --sb-radius-md: 12px; /* cards, modals, panels */ --sb-radius-lg: 16px; /* large cards, hero blocks */ --sb-radius-pill: 9999px; /* fully-rounded pills, status badges */ /* ---------- Shadows (MUI-style, very subtle) ---------- */ --sb-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --sb-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --sb-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --sb-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05); --sb-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.06); /* Focus ring */ --sb-focus-ring: 0 0 0 3px var(--sb-primary-ring); /* ---------- Layout ---------- */ --sb-sidebar-width: 256px; --sb-sidebar-width-collapsed: 72px; --sb-topnav-height: 56px; --sb-content-max: 1440px; /* ---------- Transitions ---------- */ --sb-transition-fast: 120ms ease-out; --sb-transition: 180ms ease-out; --sb-transition-slow: 280ms ease-out; /* ---------- z-index scale ---------- */ --sb-z-base: 1; --sb-z-dropdown: 1000; --sb-z-sticky: 1020; --sb-z-fixed: 1030; --sb-z-banner: 1040; --sb-z-modal-backdrop: 1050; --sb-z-modal: 1060; --sb-z-toast: 1080; } /* ============================================================================= Bootstrap CSS variable overrides ----------------------------------------------------------------------------- Bootstrap 5 uses --bs-* CSS variables for theme color. By overriding these we automatically reskin every Bootstrap primitive (.btn-primary, .badge, .form-control:focus, .card, .table, etc.) WITHOUT writing per-component override rules. This is how we avoid CSS specificity wars. ========================================================================== */ :root { /* Theme colors */ --bs-primary: var(--sb-primary); --bs-primary-rgb: 16, 185, 129; --bs-secondary: var(--sb-gray-600); --bs-secondary-rgb: 71, 85, 105; --bs-success: var(--sb-success); --bs-success-rgb: 16, 185, 129; --bs-info: var(--sb-info); --bs-info-rgb: 6, 182, 212; --bs-warning: var(--sb-warning); --bs-warning-rgb: 245, 158, 11; --bs-danger: var(--sb-danger); --bs-danger-rgb: 239, 68, 68; --bs-dark: var(--sb-brand); --bs-dark-rgb: 15, 23, 42; --bs-light: var(--sb-gray-100); --bs-light-rgb: 241, 245, 249; /* Body */ --bs-body-font-family: var(--sb-font-body); --bs-body-color: var(--sb-text); --bs-body-color-rgb: 15, 23, 42; --bs-body-bg: var(--sb-bg-page); --bs-body-bg-rgb: 255, 255, 255; /* Borders */ --bs-border-color: var(--sb-border); --bs-border-color-translucent: var(--sb-border-soft); --bs-border-radius: var(--sb-radius); --bs-border-radius-sm: var(--sb-radius-sm); --bs-border-radius-lg: var(--sb-radius-md); --bs-border-radius-xl: var(--sb-radius-lg); --bs-border-radius-pill: var(--sb-radius-pill); /* Links */ --bs-link-color: var(--sb-primary); --bs-link-color-rgb: 16, 185, 129; --bs-link-hover-color: var(--sb-primary-hover); --bs-link-hover-color-rgb: 5, 150, 105; } /* ============================================================================= Legacy variable aliases (backward compatibility) ----------------------------------------------------------------------------- Many inline