/* ═══════════════════════════════════════════════════════════════════════════ Drink FYI Design System — Color Tokens ═══════════════════════════════════════════════════════════════════════════ 8 accent palettes (switched via [data-accent="..."]) + 6 domain scales. Default accent: rose (CocktailFYI). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Accent Palettes ────────────────────────────────────────────────────── Each palette defines 11 stops: 50–950. Variable naming: --drink-accent-{stop} Switching: set data-accent="..." on or any ancestor element. ──────────────────────────────────────────────────────────────────────── */ /* Default: rose (CocktailFYI) */ :root { --drink-accent-50: #fff1f2; --drink-accent-100: #ffe4e6; --drink-accent-200: #fecdd3; --drink-accent-300: #fda4af; --drink-accent-400: #fb7185; --drink-accent-500: #f43f5e; --drink-accent-600: #e11d48; --drink-accent-700: #be123c; --drink-accent-800: #9f1239; --drink-accent-900: #881337; --drink-accent-950: #4c0519; } /* Rose — CocktailFYI (Tailwind rose) */ [data-accent="rose"] { --drink-accent-50: #fff1f2; --drink-accent-100: #ffe4e6; --drink-accent-200: #fecdd3; --drink-accent-300: #fda4af; --drink-accent-400: #fb7185; --drink-accent-500: #f43f5e; --drink-accent-600: #e11d48; --drink-accent-700: #be123c; --drink-accent-800: #9f1239; --drink-accent-900: #881337; --drink-accent-950: #4c0519; } /* Wine — VinoFYI (custom burgundy, red-900 base) */ [data-accent="wine"] { --drink-accent-50: #fef2f2; --drink-accent-100: #fee2e2; --drink-accent-200: #fecaca; --drink-accent-300: #fca5a5; --drink-accent-400: #f87171; --drink-accent-500: #991b1b; --drink-accent-600: #7f1d1d; --drink-accent-700: #6b1a1a; --drink-accent-800: #531414; --drink-accent-900: #3b0d0d; --drink-accent-950: #1f0707; } /* Amber — BeerFYI (Tailwind amber) */ [data-accent="amber"] { --drink-accent-50: #fffbeb; --drink-accent-100: #fef3c7; --drink-accent-200: #fde68a; --drink-accent-300: #fcd34d; --drink-accent-400: #fbbf24; --drink-accent-500: #f59e0b; --drink-accent-600: #d97706; --drink-accent-700: #b45309; --drink-accent-800: #92400e; --drink-accent-900: #78350f; --drink-accent-950: #451a03; } /* Coffee — BrewFYI (custom brown, amber-900 base) */ [data-accent="coffee"] { --drink-accent-50: #fefce8; --drink-accent-100: #fef3c7; --drink-accent-200: #fde68a; --drink-accent-300: #fcd34d; --drink-accent-400: #d97706; --drink-accent-500: #92400e; --drink-accent-600: #78350f; --drink-accent-700: #5c2a0e; --drink-accent-800: #451a03; --drink-accent-900: #2d1102; --drink-accent-950: #1a0a01; } /* Whiskey — WhiskeyFYI (custom orange-700) */ [data-accent="whiskey"] { --drink-accent-50: #fff7ed; --drink-accent-100: #ffedd5; --drink-accent-200: #fed7aa; --drink-accent-300: #fdba74; --drink-accent-400: #fb923c; --drink-accent-500: #f97316; --drink-accent-600: #c2410c; --drink-accent-700: #9a3412; --drink-accent-800: #7c2d12; --drink-accent-900: #6c2710; --drink-accent-950: #431407; } /* Tea — TeaFYI (Tailwind emerald) */ [data-accent="tea"] { --drink-accent-50: #ecfdf5; --drink-accent-100: #d1fae5; --drink-accent-200: #a7f3d0; --drink-accent-300: #6ee7b7; --drink-accent-400: #34d399; --drink-accent-500: #10b981; --drink-accent-600: #059669; --drink-accent-700: #047857; --drink-accent-800: #065f46; --drink-accent-900: #064e3b; --drink-accent-950: #022c22; } /* Sake — NihonshuFYI (Tailwind blue) */ [data-accent="sake"] { --drink-accent-50: #eff6ff; --drink-accent-100: #dbeafe; --drink-accent-200: #bfdbfe; --drink-accent-300: #93c5fd; --drink-accent-400: #60a5fa; --drink-accent-500: #3b82f6; --drink-accent-600: #2563eb; --drink-accent-700: #1d4ed8; --drink-accent-800: #1e40af; --drink-accent-900: #1e3a8a; --drink-accent-950: #172554; } /* Stone — DrinkFYI hub (Tailwind stone) */ [data-accent="stone"] { --drink-accent-50: #fafaf9; --drink-accent-100: #f5f5f4; --drink-accent-200: #e7e5e4; --drink-accent-300: #d6d3d1; --drink-accent-400: #a8a29e; --drink-accent-500: #78716c; --drink-accent-600: #57534e; --drink-accent-700: #44403c; --drink-accent-800: #292524; --drink-accent-900: #1c1917; --drink-accent-950: #0c0a09; } /* ── Domain Color Scales ────────────────────────────────────────────────── Accent-independent semantic colors for drink-specific data visualization. Always available in :root regardless of active accent. ──────────────────────────────────────────────────────────────────────── */ :root { /* ABV Heat Scale ─────────────────────────────────────────────────────── */ --drink-abv-none: #6b7280; --drink-abv-low: #22c55e; --drink-abv-medium: #eab308; --drink-abv-high: #f97316; --drink-abv-very-high: #dc2626; /* Beer SRM Scale (Standard Reference Method) ────────────────────────── */ --drink-srm-2: #F8F753; --drink-srm-6: #ECE61A; --drink-srm-10: #D5BC26; --drink-srm-20: #8B6B28; --drink-srm-30: #5E3C18; --drink-srm-40: #261716; /* Tea Oxidation Scale ───────────────────────────────────────────────── */ --drink-oxidation-white: #fef3c7; --drink-oxidation-green: #bbf7d0; --drink-oxidation-oolong: #fed7aa; --drink-oxidation-black: #7c2d12; --drink-oxidation-puerh: #44403c; /* Wine Color Scale ──────────────────────────────────────────────────── */ --drink-wine-white: #fef9c3; --drink-wine-rose: #fda4af; --drink-wine-red: #7f1d1d; --drink-wine-orange: #ea580c; --drink-wine-sparkling: #e0f2fe; /* Sake Grade Scale ──────────────────────────────────────────────────── */ --drink-sake-daiginjo: #fbbf24; --drink-sake-ginjo: #a3a3a3; --drink-sake-honjozo: #d6d3d1; --drink-sake-junmai: #78716c; --drink-sake-futsushu: #d4d4d4; /* Coffee Roast Scale ────────────────────────────────────────────────── */ --drink-roast-light: #d97706; --drink-roast-medium: #92400e; --drink-roast-dark: #451a03; --drink-roast-extra: #1c1917; }