:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.153 0.006 107.1);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.153 0.006 107.1);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.153 0.006 107.1);

  --primary: oklch(0.153 0.006 107.1);
  --primary-foreground: oklch(0.98 0 0);

  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.966 0.005 106.5);
  --muted-foreground: oklch(0.58 0.031 107.3);
  --accent: oklch(0.966 0.005 106.5);
  --accent-foreground: oklch(0.228 0.013 107.4);
  --destructive: oklch(57.116% 0.22195 20.073);
  --border: oklch(0.93 0.007 106.5);
  --input: oklch(0.93 0.007 106.5);
  --ring: oklch(0.737 0.021 106.9);

  --radius: 0.625rem;
}

* {
  color: var(--foreground);
}

body {
  background-color: var(--background);
}

body:has(.home) {
  --background: oklch(96.529% 0.02923 80.631);
}

hr {
  width: min(80%, 30ch);
  border-color: var(--muted-foreground);
}

button:disabled {
  opacity: 0.2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.153 0.006 107.1);
    --foreground: oklch(96.529% 0.02923 80.631);

    --card: oklch(0.153 0.006 107.1);
    --card-foreground: oklch(96.529% 0.02923 80.631);

    --popover: oklch(0.153 0.006 107.1);
    --popover-foreground: oklch(96.529% 0.02923 80.631);

    --primary: oklch(96.529% 0.02923 80.631);
    --primary-foreground: oklch(0.153 0.006 107.1);

    --secondary: oklch(0.21 0.006 285.885);
    --secondary-foreground: oklch(0.967 0.001 286.375);

    --muted: oklch(0.228 0.013 107.4);
    --muted-foreground: oklch(0.7 0.031 107.3);

    --accent: oklch(0.228 0.013 107.4);
    --accent-foreground: oklch(96.529% 0.02923 80.631);
    --destructive: oklch(0.45 0.18 20.073);

    --border: oklch(0.228 0.013 107.4);
    --input: oklch(0.228 0.013 107.4);

    --ring: oklch(0.5 0.021 106.9);
  }

  body:has(.home) {
    --background: oklch(0.153 0.006 107.1);
  }

  button img {
    filter: invert(1);
  }
}