/* ============================= */
/* Base reset & typography       */
/* ============================= */

body {
  margin: 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;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

code {
  font-family:
    source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

/* ============================= */
/* Design tokens (Light theme)   */
/* ============================= */

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;

  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;

  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;

  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;

  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;

  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;

  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;

  --radius: 0.5rem;
}

/* ============================= */
/* Dark mode                     */
/* ============================= */

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;

  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;

  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;

  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;

  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;

  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;

  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;

  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;

  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

/* ============================= */
/* Global element rules          */
/* ============================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

/* ============================= */
/* Debug wrapper support         */
/* ============================= */

[data-debug-wrapper="true"] {
  display: contents !important;
}

[data-debug-wrapper="true"] > * {
  margin-left: inherit;
  margin-right: inherit;
  margin-top: inherit;
  margin-bottom: inherit;

  padding-left: inherit;
  padding-right: inherit;
  padding-top: inherit;
  padding-bottom: inherit;

  column-gap: inherit;
  row-gap: inherit;
  gap: inherit;

  border-left-width: inherit;
  border-right-width: inherit;
  border-top-width: inherit;
  border-bottom-width: inherit;

  border-left-style: inherit;
  border-right-style: inherit;
  border-top-style: inherit;
  border-bottom-style: inherit;

  border-left-color: inherit;
  border-right-color: inherit;
  border-top-color: inherit;
  border-bottom-color: inherit;
}