@tailwind base; @tailwind components; @tailwind utilities; /* Semantic theme tokens as R G B triples (so Tailwind's `` works). Light by default; the `.dark` class on (set by the theme toggle / FOUC script) flips them to a warm green-black dark theme. Components reference the semantic Tailwind colors (surface, panel, line, heading, body, muted, faint, accent, gold) so dark mode flips automatically — no `dark:` sprawl. */ :root { --bg: 245 241 232; /* parchment */ --surface: 255 253 249; /* cards */ --panel: 240 237 228; /* chips / inset */ --line: 231 224 210; /* borders */ --heading: 21 36 28; /* strongest text */ --body: 68 64 60; /* body text */ --muted: 120 113 108; /* secondary text */ --faint: 168 162 158; /* tertiary / icons */ --accent: 31 92 71; /* pine accent (text/border) */ --accent-soft: 232 239 233; /* pine tint bg */ --accent-on: 22 65 47; /* text on accent-soft */ --gold: 176 130 47; --gold-soft: 244 234 211; --gold-deep: 134 96 23; --grain: rgba(21, 36, 28, 0.03); } .dark { --bg: 18 28 23; /* deep warm green-black */ --surface: 27 39 32; --panel: 37 51 43; --line: 52 66 57; --heading: 240 240 235; --body: 214 211 205; --muted: 161 156 148; --faint: 122 118 110; --accent: 122 191 162; /* lighter pine so it reads on dark */ --accent-soft: 30 51 42; --accent-on: 207 232 221; --gold: 212 175 116; --gold-soft: 56 47 30; --gold-deep: 224 197 142; --grain: rgba(255, 255, 255, 0.022); } html, body, #root { height: 100%; } body { @apply text-body antialiased font-sans; background-color: rgb(var(--bg)); color-scheme: light; /* A faint warm grain so the background reads as a material, not flat fill. */ background-image: radial-gradient(var(--grain) 1px, transparent 1px); background-size: 22px 22px; } .dark body { color-scheme: dark; } /* The countersigned-seal motif: a soft stamped ring used by the gate banner + the brand glyph. */ .seal-ring { box-shadow: 0 0 0 1px rgba(176, 130, 47, 0.35), 0 0 0 4px rgba(176, 130, 47, 0.1); } /* Welcome-modal entrance, disabled under reduced-motion. */ @keyframes amana-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes amana-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .anim-fade { animation: amana-fade 0.18s ease-out; } .anim-pop { animation: amana-pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); } @media (prefers-reduced-motion: reduce) { .anim-fade, .anim-pop { animation: none; } }