@layer base { :root { --background-hsl: hsl(0 0% 100%); --background: 0 0% 100%; --foreground: hsl(222.2 84% 4.9%); --foreground: 222.2 84% 4.9%; --card: hsl(0 0% 100%); --card: 0 0% 100%; --card-foreground: hsl(222.2 84% 4.9%); --card-foreground: 222.2 84% 4.9%; --popover: hsl(0 0% 100%); --popover: 0 0% 100%; --popover-foreground: hsl(222.2 84% 4.9%); --popover-foreground: 222.2 84% 4.9%; --primary: hsl(0 0% 100%); --primary: 0 0% 100%; --primary-foreground: hsl(0, 0%, 0%); --primary-foreground: 0 0% 0%; --secondary: hsl(0, 0%, 96%); --secondary: 0 0% 96%; --secondary-foreground: hsl(0, 0%, 45%); --secondary-foreground: 0 0% 45%; --secondary-highlight: hsl(0, 0%, 94%); --secondary-highlight: 0 0% 94%; --muted: hsl(210 40% 96.1%); --muted: 210 40% 96.1%; --muted-foreground: hsl(0, 0%, 64%); --muted-foreground: 0, 0%, 64%; --accent: hsl(210 40% 96.1%); --accent: 210 40% 96.1%; --accent-foreground: hsl(222.2 47.4% 11.2%); --accent-foreground: 222.2 47.4% 11.2%; --destructive: hsl(0 84.2% 60.2%); --destructive: 0 84.2% 60.2%; --destructive-foreground: hsl(210 40% 98%); --destructive-foreground: 210 40% 98%; --border: hsl(214.3 31.8% 91.4%); --border: 214.3 31.8% 91.4%; --input: hsl(214.3 31.8% 91.4%); --input: 214.3 31.8% 91.4%; --ring: hsl(222.2 84% 4.9%); --ring: 222.2 84% 4.9%; --selected: hsl(228, 89%, 63%); --selected: 228 89% 63%; --radius: 0.5rem; --severity_alert: var(--red-800); --severity_alert_dimmed: var(--red-500); --severity_detection: var(--orange-600); --severity_detection_dimmed: var(--orange-400); --severity_motion: var(--yellow-400); --severity_motion_dimmed: var(--yellow-200); --motion_review: hsl(44, 94%, 50%); --motion_review: 44 94% 50%; --motion_review_dimmed: hsl(44, 60%, 40%); --motion_review_dimmed: 44 60% 40%; --audio_review: hsl(228, 94%, 67%); --audio_review: 228 94% 67%; } .dark { --background-hsl: hsl(0 0 0%); --background: 0 0% 0%; --foreground: hsl(0, 0%, 100%); --foreground: 0, 0%, 100%; --card: hsl(0, 0%, 15%); --card: 0, 0%, 15%; --card-foreground: hsl(210 40% 98%); --card-foreground: 210 40% 98%; --popover: hsl(0, 0%, 15%); --popover: 0, 0%, 15%; --popover-foreground: hsl(0, 0%, 100%); --popover-foreground: 210 40% 98%; --primary: hsl(0, 0%, 9%); --primary: 0 0% 9%; --primary-foreground: hsl(0, 0%, 100%); --primary-foreground: 0 0% 100%; --secondary: hsl(0, 0%, 15%); --secondary: 0 0% 15%; --secondary-foreground: hsl(0, 0%, 83%); --secondary-foreground: 0 0% 83%; --secondary-highlight: hsl(0, 0%, 25%); --secondary-highlight: 0 0% 25%; --muted: hsl(0, 0%, 8%); --muted: 0 0% 8%; --muted-foreground: hsl(0, 0%, 32%); --muted-foreground: 0 0% 32%; --accent: hsl(0, 0%, 15%); --accent: 0 0% 15%; --accent-foreground: hsl(210 40% 98%); --accent-foreground: 210 40% 98%; --destructive: hsl(0 62.8% 30.6%); --destructive: 0 62.8% 30.6%; --destructive-foreground: hsl(210 40% 98%); --destructive-foreground: 210 40% 98%; --border: hsl(0, 0%, 32%); --border: 0 0% 32%; --input: hsl(217.2 32.6% 17.5%); --input: 217.2 32.6% 17.5%; --ring: hsl(212.7 26.8% 83.9%); --ring: 212.7 26.8% 83.9%; --selected: hsl(228, 89%, 63%); --selected: 228 89% 63%; } }