:root {
  /* hsl (fallback color) */
  --bg-dark-hsl: 3 100% 2%;
  --bg-hsl: 8 87% 5%;
  --bg-light-hsl: 13 63% 9%;
  --text-hsl: 14 100% 97%;
  --text-muted-hsl: 14 56% 71%;
  --highlight-hsl: 14 36% 40%;
  --border-hsl: 13 47% 29%;
  --border-muted-hsl: 14 72% 18%;
  --primary-hsl: 14 69% 71%;
  --secondary-hsl: 192 63% 61%;
  --danger-hsl: 9 42% 65%;
  --warning-hsl: 51 29% 53%;
  --success-hsl: 148 27% 56%;
  --info-hsl: 217 46% 66%;
  --ai-hsl: 274 92% 65%;

  /* oklch */
  --bg-dark: oklch(0.1 0.04 37);
  --bg: oklch(0.15 0.04 37);
  --bg-light: oklch(0.2 0.04 37);
  --text: oklch(0.96 0.08 37);
  --text-muted: oklch(0.76 0.08 37);
  --highlight: oklch(0.5 0.08 37);
  --border: oklch(0.4 0.08 37);
  --border-muted: oklch(0.3 0.08 37);
  --primary: oklch(0.82 0.1 37);
  --secondary: oklch(0.76 0.1 217);
  --danger: oklch(0.7 0.08 30);
  --warning: oklch(0.7 0.08 100);
  --success: oklch(0.7 0.08 160);
  --info: oklch(0.7 0.08 260);
  --ai: oklch(0.7 0.12 280);

  --card-bg: rgba(255, 255, 255, 0.03);
}

body.light {
  /* hsl (fallback color) */
  --bg-dark-hsl: 14 95% 91%;
  --bg-hsl: 14 100% 96%;
  --bg-light-hsl: 14 100% 100%;
  --text-hsl: 359 100% 6%;
  --text-muted-hsl: 13 47% 29%;
  --highlight-hsl: 14 100% 100%;
  --border-hsl: 14 31% 52%;
  --border-muted-hsl: 14 43% 64%;
  --primary-hsl: 14 60% 28%;
  --secondary-hsl: 189 100% 13%;
  --danger-hsl: 8 32% 41%;
  --warning-hsl: 51 46% 30%;
  --success-hsl: 150 37% 33%;
  --info-hsl: 217 34% 43%;
  --ai-hsl: 274 60% 45%;

  /* oklch */
  --bg-dark: oklch(0.92 0.04 37);
  --bg: oklch(0.96 0.04 37);
  --bg-light: oklch(1 0.04 37);
  --text: oklch(0.15 0.08 37);
  --text-muted: oklch(0.4 0.08 37);
  --highlight: oklch(1 0.08 37);
  --border: oklch(0.6 0.08 37);
  --border-muted: oklch(0.7 0.08 37);
  --primary: oklch(0.4 0.1 37);
  --secondary: oklch(0.4 0.1 217);
  --danger: oklch(0.5 0.08 30);
  --warning: oklch(0.5 0.08 100);
  --success: oklch(0.5 0.08 160);
  --info: oklch(0.5 0.08 260);
  --ai: oklch(0.5 0.12 280);

  --card-bg: rgba(0, 0, 0, 0.05);
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family:
    "Outfit",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

.logo {
  font-family: "Pacifico", cursive;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  padding-right: 0.2em;
  padding-bottom: 0.1em;
}