/* ── Design Tokens ──────────────────────────────────────────────────────── */ /* This file is the design system foundation. */ /* All colors, typography, and radii live here as CSS custom properties. */ /* NEVER hardcode a color, font, or radius value in another CSS file. */ :root { --bg:#192b1c; --surface:#1e3222; --card:rgba(255,255,255,0.058); --border:rgba(255,255,255,0.10); --green:#7ec850; --gold:#c8a84b; --red:#e07040; --blue:#60a8e0; --text:#f0ede4; --muted:rgba(240,237,228,0.62); --dim:rgba(240,237,228,0.40); --font:'DM Sans',sans-serif; --serif:'Playfair Display',serif; --r:12px; --r-sm:8px; /* Extended palette */ --green-dark:#3a7015; --green-mid:#52a026; --gold-dark:#a07830; --purple:#b464ff; --orange:#ffb43c; /* Gradient tokens */ --btn-green-bg:linear-gradient(145deg,#52a026,#3a7015); --btn-gold-bg:linear-gradient(145deg,#c8a84b,#a07830); } /* ── Light / Outdoor Mode ───────────────────────────────────────────────── */ /* Set via data-theme="light" on . Dark is the default (no attribute). */ body[data-theme="light"] { --bg: #2d5535; --surface: #3a6642; --card: rgba(255,255,255,0.09); --border: rgba(255,255,255,0.16); /* text stays white-based — still a dark theme, just brighter outdoors */ } /* ── Reset & Base ───────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased} h2{font-family:var(--serif);font-size:1.5rem;font-weight:700} h2 em{color:var(--green);font-style:normal} p{font-size:0.84rem;color:var(--muted);line-height:1.55}