:root {
  /* Light theme — warm amber (RGB channels for Tailwind alpha support) */
  --c-bg: 255 246 236;
  --c-fg: 67 38 22;
  --c-card: 255 250 244;
  --c-primary: 244 100 26;
  --c-primary-fg: 255 244 234;
  --c-secondary: 255 231 210;
  --c-secondary-fg: 122 69 32;
  --c-accent: 255 138 61;
  --c-accent-fg: 58 28 8;
  --c-muted: 255 238 222;
  --c-muted-fg: 164 116 79;
  --c-border: 246 216 189;
  --c-ring: 244 100 26;
  color-scheme: light;
}

html.dark {
  /* Dark theme — deep warm brown keeping the orange brand */
  --c-bg: 23 17 11;
  --c-fg: 245 233 220;
  --c-card: 36 27 18;
  --c-primary: 247 116 51;
  --c-primary-fg: 26 14 6;
  --c-secondary: 58 42 27;
  --c-secondary-fg: 240 213 184;
  --c-accent: 255 138 61;
  --c-accent-fg: 26 14 6;
  --c-muted: 44 33 22;
  --c-muted-fg: 194 164 135;
  --c-border: 61 45 29;
  --c-ring: 247 116 51;
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(244, 100, 26, 0.30), transparent 70%),
    linear-gradient(
      to bottom,
      #2a1407 0%,
      #5a2c12 18%,
      #b55e2e 42%,
      #f0a866 64%,
      rgb(var(--c-bg)) 88%
    );
  background-attachment: fixed;
  transition: background-color 0.25s ease, color 0.25s ease;
}

html.dark body {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(247, 116, 51, 0.20), transparent 70%),
    linear-gradient(
      to bottom,
      #060403 0%,
      #140c06 22%,
      #1c130b 50%,
      rgb(var(--c-bg)) 85%
    );
  background-attachment: fixed;
}

/* Tailwind's bg-white inputs map to the card surface in dark mode. */
html.dark input.bg-white,
html.dark select.bg-white,
html.dark textarea.bg-white {
  background-color: rgb(var(--c-card));
  color: rgb(var(--c-fg));
  border-color: rgb(var(--c-border));
}

html.dark input.bg-white::placeholder,
html.dark textarea.bg-white::placeholder {
  color: rgb(var(--c-muted-fg));
}