@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Light mode (default). Values are RGB triplets so Tailwind's
     rgb(var(--x) / <alpha-value>) colors (see tailwind.config.ts) can still
     be used with opacity modifiers like bg-charcoal/10. */
  --color-terracotta: 208 58 0; /* #D03A00 */
  --color-charcoal: 17 17 17; /* #111111 -- ink: text, borders, low-opacity tints */
  --color-gold: 216 160 61; /* #D8A03D -- unchanged in dark mode, reads well on both */
  --color-warm-white: 248 245 240; /* #F8F5F0 -- card/surface background */
  --color-cream: 245 242 236; /* #F5F2EC -- page background */
}

.dark {
  /* Dark mode: charcoal/cream/warm-white are semantic (ink / page / surface)
     rather than literal colors, so they invert here rather than disappear.
     Terracotta stays the same #D03A00 as light mode (Brandon's call -- a
     brightened variant tested better on paper for small-text contrast but
     read as too orange/off-brand against the dark background in practice).
     It dips under WCAG AA for small text on near-black (~3.8:1, vs. 4.5:1
     needed) but is fine for the large logo/heading use it's mostly used for. */
  --color-terracotta: 208 58 0; /* #D03A00 */
  --color-charcoal: 240 235 227; /* #F0EBE3 -- ink becomes light text */
  --color-gold: 216 160 61;
  --color-warm-white: 30 26 23; /* #1E1A17 -- card/surface background */
  --color-cream: 20 18 16; /* #141210 -- page background */
}

body {
  background-color: rgb(var(--color-cream));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
  background-repeat: repeat;
}