/* ============================================================ * DESIGN SYSTEM v2 — tokens, theme, and base styles * ============================================================ * * Phase (a) of the visual upgrade. Token definitions live here in * `@layer base` so existing unlayered rules below (which legacy pages * like `body.page-bookings` and `body.page-messages` rely on) WIN * during the migration. As pages are converted in later phases, they * stop carrying the legacy class and naturally pick up these tokens. * * - Light is the default (:root) * - Dark is opt-in via [data-theme="dark"] on * - The first-paint theme is set by an inline script in _base.html * BEFORE this stylesheet loads, so there is no flash-of-wrong-theme. * - theme.js handles the toggle button + live OS-preference tracking. */ @layer base, components, utilities; @layer base { :root { /* ==================================================== * Soft UI Dashboard palette (Creative Tim) — Phase (a) v2 * * Cards separate via SHADOWS not borders. Gradients are * accents reserved for KPI cards, hero strips, primary * buttons. Density loss is OK on /properties + /reports; * /bookings keeps tight row heights with a soft card. * ==================================================== */ /* Colors — light theme */ --bg: #f8f9fa; /* soft off-white canvas */ --surface: #ffffff; /* cards */ --surface-elevated: #ffffff; /* modals, popovers */ --surface-hover: rgba(0, 0, 0, 0.025); --surface-active: rgba(0, 0, 0, 0.04); --border: rgba(0, 0, 0, 0.06); /* use sparingly — shadows do the work */ --border-strong: rgba(0, 0, 0, 0.10); --border-focus: #5e72e4; --text-primary: #27272a; /* zinc-800 */ --text-secondary: #67748e; /* Soft UI signature slate */ --text-muted: #a1a1aa; /* zinc-400 */ --accent: #5e72e4; /* Soft UI indigo-blue */ --accent-hover: #4854c0; --accent-ring: rgba(94, 114, 228, 0.25); --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #0ea5e9; /* Gradients — Soft UI's signature. Use on KPI icon tiles, hero * strips, primary buttons. NOT on every card. 310deg matches * the reference. */ --gradient-primary: linear-gradient(310deg, #5e72e4, #825ee4); --gradient-success: linear-gradient(310deg, #22c55e, #98ec2d); --gradient-warning: linear-gradient(310deg, #ea580c, #facc15); --gradient-info: linear-gradient(310deg, #0ea5e9, #06b6d4); --gradient-dark: linear-gradient(310deg, #27272a, #18181b); /* Spacing — 4px base scale (unchanged) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Type scale — 15px body (unchanged) */ --text-display: 26px; --text-heading: 20px; --text-subheading: 16px; --text-body: 15px; --text-label: 14px; --text-small: 13px; --text-micro: 11px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --leading-tight: 1.25; --leading-normal: 1.5; /* Radius — Soft UI is generous. Each step ~doubles. */ --radius-sm: 0.375rem; /* 6px — pills, chips, badges */ --radius: 0.5rem; /* 8px — buttons, inputs, small cards */ --radius-md: 0.75rem; /* 12px — big cards, panels */ --radius-lg: 1rem; /* 16px — hero cards */ --radius-xl: 1.5rem; /* 24px — floating sidebar container */ /* Shadow / elevation — signature Soft UI layered shadows. * Resting cards use --shadow-card; hover lifts to --shadow-lg; * sidebar floating panel uses --shadow-md; modals use --shadow-lg. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.05); --shadow-card: 0 20px 27px 0 rgba(0, 0, 0, 0.05); /* THE Soft UI card shadow */ /* Z-index scale (unchanged) */ --z-sidebar: 40; --z-topbar: 50; --z-dropdown: 60; --z-modal-scrim: 100; --z-modal: 110; --z-toast: 200; /* Motion */ --motion-fast: 100ms ease-out; --motion: 150ms ease-out; --motion-slow: 220ms ease-out; /* Layout — topbar bumped 56 → 64 for breathing room */ --sidebar-w: 240px; --sidebar-w-collapsed: 64px; --topbar-h: 64px; --content-max-w: 1440px; --gutter: 24px; } [data-theme="dark"] { --bg: #0f1419; --surface: #1a1f2e; --surface-elevated: #232838; --surface-hover: rgba(255, 255, 255, 0.04); --surface-active: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.10); --border-focus: #7e8fff; --text-primary: #f8f9fa; --text-secondary: #adb5bd; --text-muted: #6c757d; --accent: #7e8fff; --accent-hover: #5e72e4; --accent-ring: rgba(126, 143, 255, 0.30); --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #0ea5e9; /* Gradients keep the same hues — they pop on dark too. */ /* On dark backgrounds, soften the shadow alphas — the layered * structure remains so cards still feel floating. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.25); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.40), 0 4px 6px -4px rgba(0, 0, 0, 0.30); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.50), 0 8px 10px -6px rgba(0, 0, 0, 0.40); --shadow-card: 0 20px 27px 0 rgba(0, 0, 0, 0.30); } /* Base typography + reset, scoped to the NEW shell only. Legacy pages * keep `body.page-bookings` / `body.page-messages` rules unchanged. * Pages migrated to _base.html opt in via `body.app-shell`. */ .app-shell { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-normal); font-variant-numeric: tabular-nums; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } .app-shell *, .app-shell *::before, .app-shell *::after { box-sizing: border-box; } /* Tabular nums utility — already on by default for .app-shell, but * convenient as a class when a single cell needs it inside a legacy page. */ .tabular-nums { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } } /* ============================================================ * LEGACY rules below — unlayered. They WIN over the @layer base * tokens above by virtue of being outside any cascade layer. Each * page is migrated off this block in later phases. * ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; }