Spaces:
Sleeping
Sleeping
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| /* Semantic theme tokens as R G B triples (so Tailwind's `<alpha-value>` works). Light by default; | |
| the `.dark` class on <html> (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; | |
| } | |
| } | |