@layer base { :root { --background: hsl(0, 0%, 100%); --background: 0 0% 100%; --background-alt: hsl(0, 0%, 98.5%); --background-alt: 0 0% 98.5%; --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(222.2, 37.4%, 11.2%); --primary: 222.2 47.4% 11.2%; --primary-foreground: hsl(210, 40%, 98%); --primary-foreground: 210 40% 98%; --secondary: hsl(210, 20%, 94.1%); --secondary: 210 20% 94.1%; --secondary-foreground: hsl(222.2, 17.4%, 36.2%); --secondary-foreground: 222.2 17.4% 36.2%; --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(215.4, 6.3%, 46.9%); --muted-foreground: 215.4 6.3% 46.9%; --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(0, 100%, 83%); --destructive-foreground: 0 100% 83%; --warning: hsl(17, 87%, 18%); --warning: 17 87% 18%; --warning-foreground: hsl(32, 100%, 74%); --warning-foreground: 32 100% 74%; --border: hsl(214.3, 31.8%, 91.4%); --border: 214.3 31.8% 91.4%; --input: hsl(0, 0%, 85%); --input: 0 0% 85%; --ring: hsla(0, 0%, 25%, 0%); --ring: 0 0% 25% 0%; --selected: hsl(228, 89%, 63%); --selected: 228 89% 63%; --selected-foreground: hsl(0 0% 100%); --selected-foreground: 0 0% 100%; --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_significant_motion: var(--yellow-400); --severity_significant_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(0, 0, 0%); --background: 0 0% 0%; --background-alt: hsl(0, 0, 9%); --background-alt: 0 0% 9%; --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%, 91%); --primary: 0 0% 91%; --primary-foreground: hsl(0, 0%, 9%); --primary-foreground: 0 0% 9%; --secondary: hsl(0, 0%, 15%); --secondary: 0 0% 15%; --secondary-foreground: hsl(0, 0%, 32%); --secondary-foreground: 0 0% 32%; --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(0, 100%, 83%); --destructive-foreground: 0 100% 83%; --warning: hsl(17, 87%, 18%); --warning: 17 87% 18%; --warning-foreground: hsl(32, 100%, 74%); --warning-foreground: 32 100% 74%; --border: hsl(0, 0%, 32%); --border: 0 0% 32%; --input: hsl(0, 0%, 5%); --input: 0 0% 25%; --ring: hsla(0, 0%, 25%, 0%); --ring: 0 0% 25% 0%; } }