/* ============================================================ YeGesha Coffee — Design Tokens Source: design handoff README "Design Tokens" section. Bluu Next (display) unavailable → Bodoni Moda (Didone) UPPERCASE. Body → Open Sans. Both loaded via Google Fonts in each app's . ============================================================ */ :root { /* Forest green (primary) */ --green-700: #105136; --green-800: #0a3f26; --green-900: #00311b; /* Green tints */ --green-50: #eff5f1; --green-100: #e0ebe4; --green-200: #c0d7c9; /* Champagne / gold */ --gold-400: #d8c59b; --gold-500: #ccb484; /* primary accent */ --gold-600: #bc9c63; --gold-800: #8a6f41; /* Cream paper */ --cream-50: #fbf8f2; /* page */ --cream-100: #f5f0e6; --cream-200: #ece4d5; --cream-300: #e0d6c2; --white: #ffffff; /* Espresso ink */ --ink-900: #1b1a14; --ink-800: #2a271e; --ink-700: #3c382c; --ink-500: #756d58; --ink-400: #968d75; --ink-300: #bab19a; /* Borders */ --border-subtle: var(--cream-200); --border-default: var(--cream-300); /* Secondary brand (available, mostly unused) */ --coffee-brown: #946239; --olive: #bbb76d; /* Fonts */ --font-display: "Bodoni Moda", "Didot", Georgia, "Times New Roman", serif; --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Shadows (warm-tinted, soft) */ --shadow-sm: 0 1px 3px rgba(27, 26, 20, 0.07), 0 1px 2px rgba(27, 26, 20, 0.04); --shadow-md: 0 4px 14px rgba(27, 26, 20, 0.07), 0 2px 4px rgba(27, 26, 20, 0.04); --shadow-lg: 0 12px 34px rgba(27, 26, 20, 0.1), 0 4px 10px rgba(27, 26, 20, 0.05); --shadow-xl: 0 28px 64px rgba(11, 48, 29, 0.16), 0 8px 18px rgba(27, 26, 20, 0.07); /* Radii */ --radius-xs: 3px; --radius-sm: 8px; --radius-md: 10px; --radius-card: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-slower: 700ms; /* Brand gradient used on hero / wallet surfaces */ --grad-green: linear-gradient(150deg, #0a3f26 0%, #00311b 70%); } /* ---- Reset / base ---- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; } img { display: block; } input, button, textarea, select { font: inherit; } /* ---- Keyframes (ported verbatim from the prototype) ---- */ @keyframes yeStamp { from { opacity: 0; transform: scale(1.55) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(0); } } @keyframes yeRing { from { opacity: 0.5; transform: scale(0.5); } to { opacity: 0; transform: scale(1.55); } } @keyframes yeFade { from { opacity: 0; } to { opacity: 1; } } @keyframes yeRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes yePush { from { opacity: 0; transform: translateY(-150%); } to { opacity: 1; transform: translateY(0); } } @keyframes yeSheet { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes yeToast { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes yeSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }