/* ===== Design Tokens — PropertyOS ===== */ :root, [data-bs-theme="light"] { /* ── Font ── */ --pos-font-sans: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* ── Brand ── */ --bs-primary: #0d6efd; --bs-primary-rgb: 13, 110, 253; --pos-primary: #0d6efd; --pos-primary-dark: #0a58ca; --pos-primary-subtle: rgba(13, 110, 253, 0.09); --pos-accent: #6610f2; --pos-accent-subtle: rgba(102, 16, 242, 0.09); --pos-ink-secondary: #374151; /* ── Ink & surface ── */ --pos-ink: #1b2733; --pos-muted: #6c7a89; --pos-surface: #eef1f7; --pos-border: #e0e6ef; --pos-body-bg: #eef2fa; --pos-topbar-bg: rgba(238, 242, 250, 0.78); --pos-card-bg: rgba(255, 255, 255, 0.70); --pos-sidebar-bg: #111827; --pos-focus-ring: rgba(13, 110, 253, 0.28); /* ── Gradients ── */ --pos-gradient-primary: linear-gradient(135deg, #1d6ef9 0%, #7c3aed 100%); --pos-gradient-primary-hover: linear-gradient(135deg, #1558e0 0%, #6d28d9 100%); --pos-gradient-danger: linear-gradient(135deg, #dc2626 0%, #be185d 100%); --pos-gradient-success: linear-gradient(135deg, #059669 0%, #0284c7 100%); --pos-gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); --pos-gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); --pos-gradient-cool: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); --pos-gradient-hero: linear-gradient(135deg, #1d6ef9 0%, #7c3aed 60%, #ec4899 100%); --pos-gradient-sidebar: linear-gradient(160deg, #1a2440 0%, #111827 40%, #0d1117 100%); --pos-gradient-rainbow: linear-gradient(135deg, #1d6ef9 0%, #7c3aed 33%, #ec4899 66%, #1d6ef9 100%); /* ── Apple Liquid Glass ── */ --pos-glass-bg: rgba(255, 255, 255, 0.52); --pos-glass-bg-heavy: rgba(255, 255, 255, 0.82); --pos-glass-bg-ultra: rgba(255, 255, 255, 0.94); --pos-glass-bg-xs: rgba(255, 255, 255, 0.28); --pos-glass-border: rgba(255, 255, 255, 0.75); --pos-glass-border-strong: rgba(255, 255, 255, 0.95); --pos-glass-border-top: rgba(255, 255, 255, 0.90); --pos-glass-shine: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.05) 60%); /* Specular highlights — top edge of glass panels */ --pos-specular: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 0.5px rgba(255,255,255,0.55); --pos-specular-strong: inset 0 1.5px 0 rgba(255,255,255,1.0), inset 0 0 0 1px rgba(255,255,255,0.65); --pos-glass-shadow: var(--pos-specular), 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.04); --pos-liquid-shadow: var(--pos-specular-strong), 0 16px 56px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04); --pos-card-shadow: var(--pos-specular), 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04); --pos-blur-xs: blur(6px); --pos-blur-sm: blur(12px); --pos-blur-md: blur(24px); --pos-blur-lg: blur(40px); --pos-blur-xl: blur(60px); --pos-blur-xxl: blur(80px); /* ── Glow system ── */ --pos-glow-xs: 0 0 8px rgba(13, 110, 253, 0.15); --pos-glow-sm: 0 0 16px rgba(13, 110, 253, 0.22); --pos-glow-md: 0 0 32px rgba(13, 110, 253, 0.28); --pos-glow-lg: 0 0 56px rgba(13, 110, 253, 0.32); --pos-glow-xl: 0 0 80px rgba(13, 110, 253, 0.36); --pos-glow-accent: 0 0 32px rgba(102, 16, 242, 0.26); --pos-glow-success:0 0 28px rgba(25, 135, 84, 0.26); --pos-glow-danger: 0 0 28px rgba(220, 53, 69, 0.26); --pos-glow-warm: 0 0 28px rgba(251, 146, 60, 0.28); /* Legacy aliases */ --pos-shadow-glow: var(--pos-glow-md); --pos-shadow-glow-accent: var(--pos-glow-accent); /* ── Motion ── */ --pos-duration-fast: 90ms; --pos-duration-base: 160ms; --pos-duration-slow: 300ms; --pos-duration-xslow: 460ms; --pos-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --pos-ease-out: cubic-bezier(0, 0, 0.2, 1); --pos-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --pos-ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --pos-ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ── Shadows ── */ --pos-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --pos-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04); --pos-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.09), 0 2px 5px rgba(0, 0, 0, 0.05); --pos-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.11), 0 4px 10px rgba(0, 0, 0, 0.06); --pos-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.13), 0 8px 18px rgba(0, 0, 0, 0.07); --pos-shadow-2xl: 0 32px 72px rgba(0, 0, 0, 0.17), 0 12px 28px rgba(0, 0, 0, 0.09); /* ── Border radius ── */ --pos-radius-sm: 6px; --pos-radius-md: 10px; --pos-radius-lg: 16px; --pos-radius-xl: 24px; --pos-radius-2xl: 32px; --pos-radius-3xl: 48px; --pos-radius-full: 9999px; /* ── Spacing scale ── */ --pos-space-1: 4px; --pos-space-2: 8px; --pos-space-3: 12px; --pos-space-4: 16px; --pos-space-5: 20px; --pos-space-6: 24px; --pos-space-8: 32px; --pos-space-10: 40px; --pos-space-12: 48px; --pos-space-16: 64px; } [data-bs-theme="dark"] { color-scheme: dark; /* ── Ink & surface ── */ --pos-ink: #e8eef4; --pos-ink-secondary: #b0bbc8; --pos-muted: #8a9ab0; --pos-surface: #131c2b; --pos-border: #212f44; --pos-body-bg: #070b13; --pos-topbar-bg: rgba(10, 14, 24, 0.82); --pos-card-bg: rgba(17, 24, 39, 0.72); --pos-sidebar-bg: #080c14; --pos-focus-ring: rgba(110, 168, 254, 0.40); /* ── Gradients (dark) ── */ --pos-gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); --pos-gradient-hero: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 60%, #be185d 100%); --pos-gradient-sidebar: linear-gradient(160deg, #0d1117 0%, #080c14 100%); --pos-gradient-rainbow: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 33%, #ec4899 66%, #3b82f6 100%); /* ── Glass & blur — dark ── */ --pos-glass-bg: rgba(17, 24, 39, 0.60); --pos-glass-bg-heavy: rgba(17, 24, 39, 0.88); --pos-glass-bg-ultra: rgba(17, 24, 39, 0.96); --pos-glass-bg-xs: rgba(17, 24, 39, 0.35); --pos-glass-border: rgba(255, 255, 255, 0.09); --pos-glass-border-strong: rgba(255, 255, 255, 0.16); --pos-glass-border-top: rgba(255, 255, 255, 0.20); --pos-glass-shine: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%); --pos-specular: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 0.5px rgba(255,255,255,0.08); --pos-specular-strong: inset 0 1.5px 0 rgba(255,255,255,0.20), inset 0 0 0 1px rgba(255,255,255,0.10); --pos-glass-shadow: var(--pos-specular), 0 8px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35); --pos-liquid-shadow: var(--pos-specular-strong), 0 16px 60px rgba(0, 0, 0, 0.65), 0 4px 14px rgba(0, 0, 0, 0.40); --pos-card-shadow: var(--pos-specular), 0 4px 28px rgba(0, 0, 0, 0.50), 0 1px 5px rgba(0, 0, 0, 0.30); /* ── Glow — dark ── */ --pos-glow-xs: 0 0 8px rgba(110, 168, 254, 0.14); --pos-glow-sm: 0 0 16px rgba(110, 168, 254, 0.20); --pos-glow-md: 0 0 32px rgba(110, 168, 254, 0.25); --pos-glow-lg: 0 0 56px rgba(110, 168, 254, 0.28); --pos-glow-xl: 0 0 80px rgba(110, 168, 254, 0.32); --pos-glow-accent: 0 0 32px rgba(160, 100, 255, 0.24); --pos-glow-success:0 0 28px rgba(52, 211, 153, 0.24); --pos-glow-danger: 0 0 28px rgba(252, 100, 100, 0.24); --pos-glow-warm: 0 0 28px rgba(251, 191, 36, 0.22); --pos-shadow-glow: var(--pos-glow-md); --pos-shadow-glow-accent: var(--pos-glow-accent); /* ── Shadows — dark ── */ --pos-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --pos-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.28); --pos-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40), 0 2px 5px rgba(0, 0, 0, 0.25); --pos-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.28); --pos-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.58), 0 8px 18px rgba(0, 0, 0, 0.32); --pos-shadow-2xl: 0 32px 72px rgba(0, 0, 0, 0.66), 0 12px 28px rgba(0, 0, 0, 0.38); }