@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&display=swap");

:root {
  --bg: oklch(98.5% 0 0);
  --surface: oklch(100% 0 0);
  --fg: oklch(15.9% 0 0);
  --muted: oklch(52.8% 0 0);
  --border: oklch(91.3% 0 0);
  --accent: oklch(55.1% 0.184 279);
  --accent-hover: oklch(48% 0.184 279);
  --display: "DM Serif Display", Georgia, serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --nav-bg: color-mix(in oklch, var(--surface) 92%, transparent);
  --hero-card-bg: rgb(255 255 255 / 96%);
  --hero-card-border: rgb(255 255 255 / 50%);
  --mobile-header-height: 123px;
}

:root[data-theme="light"] {
  --bg: oklch(98.5% 0 0);
  --surface: oklch(100% 0 0);
  --fg: oklch(15.9% 0 0);
  --muted: oklch(52.8% 0 0);
  --border: oklch(91.3% 0 0);
  --accent: oklch(55.1% 0.184 279);
  --accent-hover: oklch(48% 0.184 279);
  --hero-card-bg: rgb(255 255 255 / 96%);
  --hero-card-border: rgb(255 255 255 / 50%);
}

:root[data-theme="dark"] {
  --bg: oklch(15% 0 0);
  --surface: oklch(20% 0 0);
  --fg: oklch(95% 0 0);
  --muted: oklch(68% 0 0);
  --border: oklch(29% 0 0);
  --accent: oklch(63% 0.16 279);
  --accent-hover: oklch(72% 0.14 279);
  --hero-card-bg: rgb(26 26 26 / 92%);
  --hero-card-border: rgb(255 255 255 / 15%);
}