/* ========================================= WineSpy brand tokens (Option A / no-build) Keep RGB triplets for color; compose with rgb(var(--token) / ) ========================================= */ :root { /* --- Brand Reds (Merlot / Watercolour) --- */ --red-50: 252 242 242; --red-100: 248 225 225; --red-200: 242 200 200; --red-300: 231 164 164; /* soft wash / backgrounds, badges */ --red-400: 217 130 130; --red-500: 196 84 84; /* primary base */ --red-600: 168 60 60; /* primary hover / stronger text on pale bg */ --red-700: 139 45 45; /* emphasis / active / focus ring */ --red-800: 112 36 36; /* deep accent */ --red-900: 86 29 29; /* darkest accent */ /* --- Brand Greens (Bottle / Sage) --- */ --green-50: 240 247 242; --green-100: 222 239 229; --green-200: 197 226 209; --green-300: 170 212 187; /* soft wash */ --green-400: 142 197 165; --green-500: 108 176 137; /* secondary base */ --green-600: 83 150 116; /* secondary hover */ --green-700: 63 121 94; /* deep accent */ --green-800: 49 96 75; --green-900: 38 75 59; /* --- Neutrals (warm paper & graphite) --- */ --paper: 253 251 247; /* off-white with warmth */ --bg: 255 255 255; /* pure white canvas when needed */ --ink: 23 23 23; /* near-black for outlines/ink */ --text: 32 35 41; /* default text */ --muted: 102 112 124; /* secondary text */ --border: 219 222 226; /* soft border */ /* --- Semantic aliases (use these in app) --- */ --brand: var(--red-500); --brand-strong: var(--red-700); --brand-soft: var(--red-300); --accent: var(--green-500); --accent-strong: var(--green-700); --accent-soft: var(--green-300); /* --- Typography --- */ --font-head: 'Playfair Display', ui-serif, serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-serif: "Iowan Old Style", "Georgia", ui-serif, serif; /* optional for secondary headings */ --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; /* --- Spacing / Radius / Shadow --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --radius-sm: 0.5rem; --radius-md: 0.75rem; /* default */ --radius-lg: 1rem; /* soft, watercolor-esque shadows */ --shadow-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.03); --shadow-2: 0 4px 16px rgb(0 0 0 / 0.08); } /* --- Dark mode (toggle .dark on ) --- */ .dark { --paper: 17 18 22; --bg: 12 13 16; --text: 232 234 237; --muted: 165 170 179; --border: 54 59 68; /* shift reds/greens a touch cooler & deeper for dark */ --red-500: 204 110 110; --red-700: 176 85 85; --green-500: 120 190 150; --green-700: 94 150 120; --brand: var(--red-500); --brand-strong: var(--red-700); --brand-soft: 72 32 32; /* muted wash for dark bg */ --accent: var(--green-500); --accent-strong: var(--green-700); --accent-soft: 34 56 46; } /* --- Utility color vars as rgb() strings --- */ :root, .dark { --c-brand: rgb(var(--brand)); --c-brand-strong: rgb(var(--brand-strong)); --c-brand-soft: rgb(var(--brand-soft)); --c-accent: rgb(var(--accent)); --c-accent-strong: rgb(var(--accent-strong)); --c-accent-soft: rgb(var(--accent-soft)); --c-text: rgb(var(--text)); --c-muted: rgb(var(--muted)); --c-paper: rgb(var(--paper)); --c-bg: rgb(var(--bg)); --c-border: rgb(var(--border)); }