/* ========================================================================== Foodsey Theme Tokens ========================================================================== Semantic color tokens for all 5 themes, defined as CSS custom properties. Components reference these tokens — never raw hex values. Themes are applied via the data-theme attribute on . Default theme is "plain". Reference: Aesthetics Bible Section 4, PRD-003 Section 3.1 ========================================================================== */ /* -------------------------------------------------------------------------- Theme: Plain (Default) Inspiration: Vanilla bean, oat milk, parchment, a clean countertop. -------------------------------------------------------------------------- */ :root, [data-theme="plain"] { /* Typography */ --font-family: 'Inter'; /* Semantic colors */ --color-primary: #6B5F55; --color-primary-hover: #574E45; --color-primary-subtle: #F3EFEB; --color-background: #FAF8F5; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #E5E0DA; --color-border-subtle: #EFEBE6; --color-text: #2D2A26; --color-text-secondary: #706A65; --color-text-on-primary: #FFFFFF; --color-success: #4A9B6E; --color-warning: #C08B1A; --color-error: #C44040; /* Tag category colors */ --tag-origin-bg: #E3EDF7; --tag-origin-text: #3D6B9E; --tag-vibe-bg: #DFF0EE; --tag-vibe-text: #2E7A73; --tag-technique-bg: #ECE4F4; --tag-technique-text: #6B4D8A; --tag-equipment-bg: #FAEADB; --tag-equipment-text: #9E6B2E; --tag-preference-bg: #F8E2EA; --tag-preference-text: #9E3D6B; --tag-dietary-bg: #E0F0E4; --tag-dietary-text: #3D7A4A; /* Gradient placeholder palette (recipe cards without photos) */ --gradient-1-from: #E8E0D6; --gradient-1-to: #D4C9BB; --gradient-2-from: #DED8CF; --gradient-2-to: #C8BFB3; --gradient-3-from: #E5DDD4; --gradient-3-to: #D1C4B5; } /* -------------------------------------------------------------------------- Theme: Mint Inspiration: Fresh mint leaves, cool morning air, herb garden, clean water. -------------------------------------------------------------------------- */ [data-theme="mint"] { /* Typography */ --font-family: 'Plus Jakarta Sans'; /* Semantic colors */ --color-primary: #1A7A5E; --color-primary-hover: #14654C; --color-primary-subtle: #EDF8F4; --color-background: #F6FAF8; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #D4E8E0; --color-border-subtle: #E8F2ED; --color-text: #1A2E28; --color-text-secondary: #56736B; --color-text-on-primary: #FFFFFF; --color-success: #1A7A5E; --color-warning: #C08B1A; --color-error: #C44040; /* Tag category colors — cooler tints to harmonize with mint palette */ --tag-origin-bg: #E0ECF7; --tag-origin-text: #38689E; --tag-vibe-bg: #DAF0EC; --tag-vibe-text: #287870; --tag-technique-bg: #E8E2F4; --tag-technique-text: #654B88; --tag-equipment-bg: #F7E9D8; --tag-equipment-text: #9A682A; --tag-preference-bg: #F5DFE8; --tag-preference-text: #9A3B66; --tag-dietary-bg: #DCF0E2; --tag-dietary-text: #387A46; /* Gradient placeholder palette */ --gradient-1-from: #D0EDE4; --gradient-1-to: #B3DDD0; --gradient-2-from: #C5E8DC; --gradient-2-to: #A8D6C6; --gradient-3-from: #D8F0E8; --gradient-3-to: #BFE4D6; } /* -------------------------------------------------------------------------- Theme: Strawberry Inspiration: Ripe strawberries, rose petals, a warm blush, summer market. -------------------------------------------------------------------------- */ [data-theme="strawberry"] { /* Typography */ --font-family: 'DM Sans'; /* Semantic colors */ --color-primary: #C14B5F; --color-primary-hover: #A8404F; --color-primary-subtle: #FDF0F2; --color-background: #FFFAF8; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #EEDADD; --color-border-subtle: #F6EAED; --color-text: #2D1F22; --color-text-secondary: #8A6B71; --color-text-on-primary: #FFFFFF; --color-success: #4A9B6E; --color-warning: #C08B1A; --color-error: #C44040; /* Tag category colors — warmer tints to harmonize with rose palette */ --tag-origin-bg: #E5EEF8; --tag-origin-text: #406CA0; --tag-vibe-bg: #E0F0ED; --tag-vibe-text: #2E7A72; --tag-technique-bg: #EDE5F5; --tag-technique-text: #6E4E8C; --tag-equipment-bg: #FBEBD8; --tag-equipment-text: #A06C2E; --tag-preference-bg: #FAE3EB; --tag-preference-text: #A03E6C; --tag-dietary-bg: #E2F1E5; --tag-dietary-text: #3E7C4C; /* Gradient placeholder palette */ --gradient-1-from: #F2D5DA; --gradient-1-to: #E8BFC6; --gradient-2-from: #EDCDD3; --gradient-2-to: #DFB5BD; --gradient-3-from: #F5DDE1; --gradient-3-to: #EBC8CE; } /* -------------------------------------------------------------------------- Theme: Banana Inspiration: Ripe bananas, golden hour light, warm honey, sunflower fields. -------------------------------------------------------------------------- */ [data-theme="banana"] { /* Typography */ --font-family: 'Nunito'; /* Semantic colors */ --color-primary: #96710A; --color-primary-hover: #7C5D08; --color-primary-subtle: #FFF8E7; --color-background: #FFFCF5; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #EBE2CF; --color-border-subtle: #F3EEDF; --color-text: #2C2612; --color-text-secondary: #7A7260; --color-text-on-primary: #FFFFFF; --color-success: #4A9B6E; --color-warning: #96710A; --color-error: #C44040; /* Tag category colors — golden-warm tints to harmonize with banana palette */ --tag-origin-bg: #E4ECF6; --tag-origin-text: #3E6A9C; --tag-vibe-bg: #DFF0EC; --tag-vibe-text: #2C7A70; --tag-technique-bg: #EBE3F3; --tag-technique-text: #694C88; --tag-equipment-bg: #FAE9D6; --tag-equipment-text: #9E6A2A; --tag-preference-bg: #F7E1E8; --tag-preference-text: #9C3C6A; --tag-dietary-bg: #DFF0E2; --tag-dietary-text: #3C7A48; /* Gradient placeholder palette */ --gradient-1-from: #F0E3C3; --gradient-1-to: #E3D3A8; --gradient-2-from: #EDE0BB; --gradient-2-to: #DDCD9C; --gradient-3-from: #F3E8CE; --gradient-3-to: #E8D9B3; } /* -------------------------------------------------------------------------- Theme: Peanut Inspiration: Peanut butter, toasted almonds, rich soil, leather-bound cookbooks. -------------------------------------------------------------------------- */ [data-theme="peanut"] { /* Typography */ --font-family: 'Source Sans 3'; /* Semantic colors */ --color-primary: #8B6A3E; --color-primary-hover: #735832; --color-primary-subtle: #F7F1E9; --color-background: #FAF7F2; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #E3D9CC; --color-border-subtle: #EDE6DC; --color-text: #2C2318; --color-text-secondary: #7A6E60; --color-text-on-primary: #FFFFFF; --color-success: #4A9B6E; --color-warning: #C08B1A; --color-error: #C44040; /* Tag category colors — earthy-warm tints to harmonize with peanut palette */ --tag-origin-bg: #E3ECF5; --tag-origin-text: #3C689A; --tag-vibe-bg: #DEF0EC; --tag-vibe-text: #2A786E; --tag-technique-bg: #EAE2F2; --tag-technique-text: #674A86; --tag-equipment-bg: #F9E8D5; --tag-equipment-text: #9C6828; --tag-preference-bg: #F6E0E7; --tag-preference-text: #9A3A68; --tag-dietary-bg: #DEF0E1; --tag-dietary-text: #3A7846; /* Gradient placeholder palette */ --gradient-1-from: #E0D2C0; --gradient-1-to: #D0BCAA; --gradient-2-from: #D8C8B3; --gradient-2-to: #C6B29A; --gradient-3-from: #E4D8C8; --gradient-3-to: #D4C3AE; } /* ========================================================================== Shared Design Tokens (non-theme-specific) ========================================================================== Spacing, border radius, and elevation/shadow tokens are consistent across all themes. Defined on :root. Reference: Aesthetics Bible Sections 6.1, 6.2, 12.1 ========================================================================== */ :root { /* Spacing scale — 4px base unit Usage: padding, margins, gaps between elements */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Border radius scale Consistent rounding reinforces "friendly and approachable" personality */ --radius-sm: 6px; /* Badges, tags, small elements */ --radius-md: 10px; /* Buttons, inputs, small cards */ --radius-lg: 14px; /* Cards, panels, modals */ --radius-xl: 20px; /* Feature cards, hero elements */ --radius-full: 9999px; /* Avatars, circular buttons, pills */ /* Elevation / shadow scale Shadows use black with low opacity for natural look across all themes */ --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-2: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-3: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04); --shadow-4: 0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.04); }