/* EIN Energy Design System
   4 Colors: Dark, Light, Turquoise, Dark Green
   All colors MUST be HSL.
*/

:root {
  /* Light background */
  --background: 150 20% 98%;
  --foreground: 160 30% 15%;

  /* Cards - slightly off-white with green tint */
  --card: 150 15% 99%;
  --card-foreground: 160 30% 15%;

  --popover: 150 15% 99%;
  --popover-foreground: 160 30% 15%;

  /* Primary - Turquoise */
  --primary: 174 62% 47%;
  --primary-foreground: 0 0% 100%;

  /* Secondary - Light */
  --secondary: 150 20% 95%;
  --secondary-foreground: 160 30% 15%;

  /* Muted - Light gray with green tint */
  --muted: 150 15% 93%;
  --muted-foreground: 160 15% 45%;

  /* Accent - Dark elegant green */
  --accent: 160 45% 20%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 150 20% 88%;
  --input: 150 20% 88%;
  --ring: 174 62% 47%;

  --radius: 0.75rem;

  /* Custom brand colors */
  --ein-dark: 160 30% 15%;
  --ein-light: 150 20% 98%;
  --ein-turquoise: 174 62% 47%;
  --ein-green: 160 45% 20%;

  --sidebar-background: 160 45% 20%;
  --sidebar-foreground: 150 20% 95%;
  --sidebar-primary: 174 62% 47%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 160 40% 25%;
  --sidebar-accent-foreground: 150 20% 95%;
  --sidebar-border: 160 35% 25%;
  --sidebar-ring: 174 62% 47%;
}

.dark {
  --background: 160 30% 10%;
  --foreground: 150 20% 95%;

  --card: 160 30% 12%;
  --card-foreground: 150 20% 95%;

  --popover: 160 30% 12%;
  --popover-foreground: 150 20% 95%;

  --primary: 174 62% 47%;
  --primary-foreground: 160 30% 10%;

  --secondary: 160 30% 18%;
  --secondary-foreground: 150 20% 95%;

  --muted: 160 25% 20%;
  --muted-foreground: 150 15% 60%;

  --accent: 174 62% 47%;
  --accent-foreground: 160 30% 10%;

  --destructive: 0 62% 40%;
  --destructive-foreground: 0 0% 100%;

  --border: 160 25% 20%;
  --input: 160 25% 20%;
  --ring: 174 62% 47%;

  --sidebar-background: 160 30% 8%;
  --sidebar-foreground: 150 20% 95%;
  --sidebar-primary: 174 62% 47%;
  --sidebar-primary-foreground: 160 30% 10%;
  --sidebar-accent: 160 30% 15%;
  --sidebar-accent-foreground: 150 20% 95%;
  --sidebar-border: 160 25% 18%;
  --sidebar-ring: 174 62% 47%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  margin: 0;
  padding: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}