/* ===== 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 palette ── Primary: indigo (actions, links, focus, nav highlight). Accent: teal (money/positive figures — rent received, income deltas — kept distinct from --pos-success so "this is a currency figure" reads differently from "this operation succeeded"). Highlight: amber, used sparingly for marketing CTAs and attention badges only — never for core app chrome. Three deliberate hues, not a rainbow: this is a considered palette, not one-color minimalism. */ --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229; --pos-primary: #4f46e5; --pos-primary-dark: #4338ca; --pos-primary-light: #818cf8; --pos-primary-subtle: rgba(79, 70, 229, 0.10); --pos-accent: #0d9488; --pos-accent-dark: #0f766e; --pos-accent-subtle: rgba(13, 148, 136, 0.10); --pos-highlight: #d97706; --pos-highlight-subtle: rgba(217, 119, 6, 0.12); --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(79, 70, 229, 0.28); /* ── Form validation ── */ --pos-error: #e5484d; --pos-error-border: #e5484d; --pos-error-subtle: rgba(229, 72, 77, 0.10); --pos-error-ring: rgba(229, 72, 77, 0.22); /* ── Gradients ── Each gradient is a tonal ramp within ONE hue (indigo primary, teal accent, or the semantic hue for danger/success/warm) — never a multi-hue "rainbow" blend within a single element. Kept short/subtle (small angle range, close stops) per the flat, plain-not-3D direction — these read as a soft tint, not a shiny bevel. */ --pos-gradient-primary: linear-gradient(135deg, #5b52e8 0%, #4338ca 100%); --pos-gradient-primary-hover: linear-gradient(135deg, #4f46e5 0%, #372fb8 100%); --pos-gradient-danger: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); --pos-gradient-success: linear-gradient(135deg, #059669 0%, #047857 100%); --pos-gradient-accent: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); --pos-gradient-warm: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --pos-gradient-cool: linear-gradient(135deg, #5b52e8 0%, #4338ca 100%); --pos-gradient-hero: linear-gradient(135deg, #5b52e8 0%, #4338ca 100%); --pos-gradient-sidebar: linear-gradient(160deg, #1a2440 0%, #111827 40%, #0d1117 100%); --pos-gradient-rainbow: linear-gradient(135deg, #5b52e8 0%, #4338ca 50%, #5b52e8 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 — dialed way back for a flat, modern look (no neon breathing) ── */ --pos-glow-xs: 0 0 6px rgba(79, 70, 229, 0.10); --pos-glow-sm: 0 0 10px rgba(79, 70, 229, 0.14); --pos-glow-md: 0 0 16px rgba(79, 70, 229, 0.16); --pos-glow-lg: 0 0 24px rgba(79, 70, 229, 0.18); --pos-glow-xl: 0 0 32px rgba(79, 70, 229, 0.20); --pos-glow-accent: 0 0 16px rgba(13, 148, 136, 0.18); --pos-glow-success:0 0 14px rgba(25, 135, 84, 0.16); --pos-glow-danger: 0 0 14px rgba(220, 53, 69, 0.16); --pos-glow-warm: 0 0 14px rgba(217, 119, 6, 0.18); /* 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(129, 140, 248, 0.40); /* ── Brand palette — dark ── */ --pos-primary: #818cf8; --pos-primary-dark: #6366f1; --pos-primary-light: #a5b4fc; --pos-primary-subtle: rgba(129, 140, 248, 0.14); --pos-accent: #2dd4bf; --pos-accent-dark: #14b8a6; --pos-accent-subtle: rgba(45, 212, 191, 0.14); --pos-highlight: #fbbf24; --pos-highlight-subtle: rgba(251, 191, 36, 0.14); /* ── Form validation — dark ── */ --pos-error: #f87171; --pos-error-border: #f87171; --pos-error-subtle: rgba(248, 113, 113, 0.12); --pos-error-ring: rgba(248, 113, 113, 0.28); /* ── Gradients (dark) — same one-hue-family rule as light mode ── */ --pos-gradient-primary: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --pos-gradient-primary-hover: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); --pos-gradient-accent: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%); --pos-gradient-cool: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --pos-gradient-hero: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --pos-gradient-sidebar: linear-gradient(160deg, #0d1117 0%, #080c14 100%); --pos-gradient-rainbow: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #6366f1 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, dialed back to match the flat light-mode treatment ── */ --pos-glow-xs: 0 0 6px rgba(129, 140, 248, 0.14); --pos-glow-sm: 0 0 10px rgba(129, 140, 248, 0.18); --pos-glow-md: 0 0 16px rgba(129, 140, 248, 0.20); --pos-glow-lg: 0 0 24px rgba(129, 140, 248, 0.22); --pos-glow-xl: 0 0 32px rgba(129, 140, 248, 0.24); --pos-glow-accent: 0 0 16px rgba(45, 212, 191, 0.22); --pos-glow-success:0 0 14px rgba(52, 211, 153, 0.20); --pos-glow-danger: 0 0 14px rgba(252, 100, 100, 0.20); --pos-glow-warm: 0 0 14px rgba(251, 191, 36, 0.20); --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); }