@charset "UTF-8";
/* ============================= */
/* 1) Design system: proměnné    */
/* ============================= */
:root {
  --background: 0 0% 100%;
  --foreground: 142 71% 8%;
  --card: 0 0% 100%;
  --card-foreground: 142 71% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 142 71% 8%;
  --primary: 142 71% 45%;
  --primary-foreground: 0 0% 98%;
  --secondary: 142 20% 96%;
  --secondary-foreground: 142 71% 8%;
  --muted: 142 20% 96%;
  --muted-foreground: 142 20% 45%;
  --accent: 142 30% 92%;
  --accent-foreground: 142 71% 8%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 142 30% 88%;
  --input: 142 30% 88%;
  --ring: 142 71% 45%;
  --radius: 9999px;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 142 71% 8%;
  --sidebar-primary: 142 71% 45%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 142 30% 92%;
  --sidebar-accent-foreground: 142 71% 8%;
  --sidebar-border: 142 30% 88%;
  --sidebar-ring: 142 71% 45%;
}

/* ================ */
/* 2) Dark mode     */
/* ================ */
.dark {
  --background: 142 84% 2%;
  --foreground: 142 20% 95%;
  --card: 142 84% 2%;
  --card-foreground: 142 20% 95%;
  --popover: 142 84% 2%;
  --popover-foreground: 142 20% 95%;
  --primary: 142 71% 55%;
  --primary-foreground: 142 84% 2%;
  --secondary: 142 32% 8%;
  --secondary-foreground: 142 20% 95%;
  --muted: 142 32% 8%;
  --muted-foreground: 142 20% 65%;
  --accent: 142 32% 12%;
  --accent-foreground: 142 20% 95%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 142 32% 12%;
  --input: 142 32% 12%;
  --ring: 142 71% 55%;
  --sidebar-background: 142 84% 2%;
  --sidebar-foreground: 142 20% 95%;
  --sidebar-primary: 142 71% 55%;
  --sidebar-primary-foreground: 142 84% 2%;
  --sidebar-accent: 142 32% 12%;
  --sidebar-accent-foreground: 142 20% 95%;
  --sidebar-border: 142 32% 12%;
  --sidebar-ring: 142 71% 55%;
}

/* ============================= */
/* 3) Globální základní styly    */
/* ============================= */
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* ============================= */
/* 4) Legacy React CSS           */
/* ============================= */
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em rgba(100, 108, 255, 0.6666666667));
}

.logo.react:hover {
  filter: drop-shadow(0 0 2em rgba(97, 218, 251, 0.6666666667));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}/*# sourceMappingURL=app.css.map */