@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Class-based dark mode: <html class="dark"> is toggled by ThemeToggle.tsx */
@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-alt: var(--surface-alt);
  --color-border: var(--border);
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-accent: var(--accent);
  --color-accent-deep: var(--accent-deep);
}

:root {
  --bg: #fbf9f6;
  --surface: #ffffff;
  --surface-alt: #f3ede3;
  --border: #e7dfd0;
  --text: #201a14;
  --text-muted: #6b5f52;
  --primary: #e8590c;
  --primary-hover: #c2410c;
  --accent: #c77d00;
  --accent-deep: #7a1204;
}

.dark {
  --bg: #15110d;
  --surface: #1d1712;
  --surface-alt: #241c15;
  --border: #392c20;
  --text: #f3ece2;
  --text-muted: #b6a996;
  --primary: #ff7a3d;
  --primary-hover: #ff9a63;
  --accent: #ffc24c;
  --accent-deep: #ff8a63;
}

html {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

::selection {
  background-color: var(--color-primary);
  color: #fff;
}