:root {
  /* Theme custom overrides for premium look */
  --primary: rgb(99 102 241); /* indigo-500 */
  --ring: rgb(99 102 241);
  --border: rgb(228 228 231); /* zinc-200 */
  --input: rgb(228 228 231);
  --radius: 12px;

  /* Base spacing adjustments */
  --page-max-width: 680px;
}

[data-theme="dark"] {
  --primary: rgb(129 140 248); /* indigo-400 */
  --ring: rgb(129 140 248);
  --border: rgb(39 39 42); /* zinc-800 */
  --input: rgb(39 39 42);
  --background: rgb(9 9 11);
  --foreground: rgb(250 250 250);
  --card: rgb(24 24 27);
  --card-foreground: rgb(250 250 250);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  padding: var(--space-8) var(--space-4);
  max-width: var(--page-max-width);
  width: 100%;
  margin: 0 auto;
}

.card {
  border-radius: var(--radius);
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.05),
    0 2px 4px -2px rgb(0 0 0 / 0.05);
  border: 1px solid var(--border);
  transition: all 0.2s ease-in-out;
}

.card:hover {
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.05),
    0 4px 6px -4px rgb(0 0 0 / 0.05);
}

/* Custom style tweaks for Oat elements */
nav[data-topnav] {
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) var(--space-6);
  background: var(--card);
}

.hidden {
  display: none !important;
}

.group legend {
  background: var(--card);
}

.toast-container {
  z-index: 1000;
}