/* ========================================================================== Foodsey Theme Tokens ========================================================================== Semantic color tokens for active and legacy 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 configured in FrontendAppearanceConfig. 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; } /* -------------------------------------------------------------------------- Theme: Vanilla Bean (Light) Inspiration: Vanilla pod, toasted cream, warm parchment, soft oat tones. -------------------------------------------------------------------------- */ [data-theme="vanilla-bean"] { /* Typography */ --font-family: 'Inter'; /* Semantic colors */ --color-primary: #8A7A6B; --color-primary-hover: #726457; --color-primary-subtle: #F6F1EB; --color-background: #FAF7F1; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #E8DED2; --color-border-subtle: #F0E9E1; --color-text: #2D2822; --color-text-secondary: #6E665E; --color-text-on-primary: #FFFFFF; --color-success: #4A9B6E; --color-warning: #B67C17; --color-error: #C44040; /* Tag category colors */ --tag-origin-bg: #E4EDF7; --tag-origin-text: #3E6A9D; --tag-vibe-bg: #DFF0EC; --tag-vibe-text: #2D7A71; --tag-technique-bg: #ECE4F4; --tag-technique-text: #6A4D89; --tag-equipment-bg: #F9E9D8; --tag-equipment-text: #9D6A2C; --tag-preference-bg: #F8E1E8; --tag-preference-text: #9C3D6A; --tag-dietary-bg: #E0F0E3; --tag-dietary-text: #3D7A49; /* Gradient placeholder palette */ --gradient-1-from: #EAE0D4; --gradient-1-to: #D9CDBF; --gradient-2-from: #E2D8CC; --gradient-2-to: #CEBFAE; --gradient-3-from: #EEE4D8; --gradient-3-to: #DDCFBF; } /* -------------------------------------------------------------------------- Theme: Pistachio (Light) Inspiration: Pistachio cream, spring herbs, pale shells, fresh foliage. -------------------------------------------------------------------------- */ [data-theme="pistachio"] { /* Typography */ --font-family: 'Manrope'; /* Semantic colors */ --color-primary: #5D8A56; --color-primary-hover: #4D7448; --color-primary-subtle: #EEF6EC; --color-background: #F8FCF7; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #D8E7D4; --color-border-subtle: #E7F1E4; --color-text: #1F2C1E; --color-text-secondary: #5D725B; --color-text-on-primary: #FFFFFF; --color-success: #3F8E5D; --color-warning: #B8831C; --color-error: #C44040; /* Tag category colors */ --tag-origin-bg: #E2ECF7; --tag-origin-text: #3B6799; --tag-vibe-bg: #DDF0E9; --tag-vibe-text: #29766B; --tag-technique-bg: #EAE3F3; --tag-technique-text: #674A86; --tag-equipment-bg: #F8E9D6; --tag-equipment-text: #9B672A; --tag-preference-bg: #F6E1E7; --tag-preference-text: #993A67; --tag-dietary-bg: #DDEEDC; --tag-dietary-text: #357540; /* Gradient placeholder palette */ --gradient-1-from: #D7E8D3; --gradient-1-to: #BED5B9; --gradient-2-from: #CCE1C8; --gradient-2-to: #B2CCA9; --gradient-3-from: #E0EFDC; --gradient-3-to: #C7DEC2; } /* -------------------------------------------------------------------------- Theme: Plum (Light) Inspiration: Plum skin, mauve flesh, dusk florals, soft velvet. -------------------------------------------------------------------------- */ [data-theme="plum"] { /* Typography */ --font-family: 'Manrope'; /* Semantic colors */ --color-primary: #80547D; --color-primary-hover: #6A4668; --color-primary-subtle: #F7EEF6; --color-background: #FDF9FD; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #E8DBE8; --color-border-subtle: #F1E7F1; --color-text: #2B1F2A; --color-text-secondary: #6E5C6D; --color-text-on-primary: #FFFFFF; --color-success: #4A9B6E; --color-warning: #B8831C; --color-error: #C44040; /* Tag category colors */ --tag-origin-bg: #E4EDF8; --tag-origin-text: #406C9F; --tag-vibe-bg: #E1F0EC; --tag-vibe-text: #2E7A72; --tag-technique-bg: #EEE6F6; --tag-technique-text: #6F4F8D; --tag-equipment-bg: #FBECD9; --tag-equipment-text: #A06C2E; --tag-preference-bg: #F9E2ED; --tag-preference-text: #A23F70; --tag-dietary-bg: #E2F1E5; --tag-dietary-text: #3E7C4B; /* Gradient placeholder palette */ --gradient-1-from: #E6D6E6; --gradient-1-to: #D5BED4; --gradient-2-from: #DDCBDE; --gradient-2-to: #C8ABC8; --gradient-3-from: #ECDDED; --gradient-3-to: #DCC5DD; } /* -------------------------------------------------------------------------- Theme: Mango (Light) Inspiration: Ripe mango, saffron flesh, sunrise citrus, warm brightness. -------------------------------------------------------------------------- */ [data-theme="mango"] { /* Typography */ --font-family: 'Nunito'; /* Semantic colors */ --color-primary: #B56A14; --color-primary-hover: #965710; --color-primary-subtle: #FFF5E8; --color-background: #FFFBF5; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #EEDFC9; --color-border-subtle: #F5EBDD; --color-text: #2D2418; --color-text-secondary: #776956; --color-text-on-primary: #FFFFFF; --color-success: #4A9B6E; --color-warning: #B56A14; --color-error: #C44040; /* Tag category colors */ --tag-origin-bg: #E5EEF8; --tag-origin-text: #406B9E; --tag-vibe-bg: #E0F0EC; --tag-vibe-text: #2D7A72; --tag-technique-bg: #ECE5F4; --tag-technique-text: #6B4E8A; --tag-equipment-bg: #FCEEDC; --tag-equipment-text: #A86C27; --tag-preference-bg: #F8E2E8; --tag-preference-text: #9F3D67; --tag-dietary-bg: #E1F0E4; --tag-dietary-text: #3C7A49; /* Gradient placeholder palette */ --gradient-1-from: #F1DFC0; --gradient-1-to: #E3CA99; --gradient-2-from: #EED7B2; --gradient-2-to: #DDBB82; --gradient-3-from: #F5E6CA; --gradient-3-to: #E8D1A4; } /* -------------------------------------------------------------------------- Theme: Coffee (Dark) Inspiration: Espresso crema, roasted beans, cafe shadows, warm nighttime. -------------------------------------------------------------------------- */ [data-theme="coffee"] { /* Typography */ --font-family: 'Source Sans 3'; /* Semantic colors */ --color-primary: #C89A6E; --color-primary-hover: #D7AE86; --color-primary-subtle: #2A211A; --color-background: #17120F; --color-surface: #201914; --color-surface-raised: #2A211A; --color-border: #45372D; --color-border-subtle: #352A22; --color-text: #F3E8DD; --color-text-secondary: #C5B2A2; --color-text-on-primary: #1A130E; --color-success: #77C095; --color-warning: #E5B35A; --color-error: #E67878; /* Tag category colors */ --tag-origin-bg: #2A3340; --tag-origin-text: #AFC9E8; --tag-vibe-bg: #203932; --tag-vibe-text: #9ED9CC; --tag-technique-bg: #332C46; --tag-technique-text: #C8B2E5; --tag-equipment-bg: #3C2F20; --tag-equipment-text: #F0C68D; --tag-preference-bg: #3E2636; --tag-preference-text: #EEB4D4; --tag-dietary-bg: #263827; --tag-dietary-text: #AEE0B3; /* Gradient placeholder palette */ --gradient-1-from: #3A2E26; --gradient-1-to: #2B211A; --gradient-2-from: #332820; --gradient-2-to: #261D17; --gradient-3-from: #41342B; --gradient-3-to: #30241D; } /* -------------------------------------------------------------------------- Theme: Hazelnut (Dark) Inspiration: Toasted hazelnut, praline shell, cocoa bark, evening warmth. -------------------------------------------------------------------------- */ [data-theme="hazelnut"] { /* Typography */ --font-family: 'Source Sans 3'; /* Semantic colors */ --color-primary: #D1A17E; --color-primary-hover: #DEB695; --color-primary-subtle: #2C2019; --color-background: #18120E; --color-surface: #211913; --color-surface-raised: #2B211A; --color-border: #4A3A2F; --color-border-subtle: #372B23; --color-text: #F5E7DA; --color-text-secondary: #C8B09D; --color-text-on-primary: #1A120C; --color-success: #7AC79A; --color-warning: #E5B461; --color-error: #E57E7E; /* Tag category colors */ --tag-origin-bg: #2B3541; --tag-origin-text: #B2CCE9; --tag-vibe-bg: #203A34; --tag-vibe-text: #A2DACF; --tag-technique-bg: #342D47; --tag-technique-text: #CCB7E7; --tag-equipment-bg: #3E301F; --tag-equipment-text: #F2CA92; --tag-preference-bg: #3F2738; --tag-preference-text: #F0B9D7; --tag-dietary-bg: #263A29; --tag-dietary-text: #B0E2B5; /* Gradient placeholder palette */ --gradient-1-from: #3D3026; --gradient-1-to: #2D221A; --gradient-2-from: #372A21; --gradient-2-to: #291F18; --gradient-3-from: #43352B; --gradient-3-to: #32261E; } /* -------------------------------------------------------------------------- Theme: Dark Chocolate (Dark) Inspiration: Bitter chocolate bar, cacao nibs, midnight ganache, smoke. -------------------------------------------------------------------------- */ [data-theme="dark-chocolate"] { /* Typography */ --font-family: 'IBM Plex Sans'; /* Semantic colors */ --color-primary: #D6A684; --color-primary-hover: #E3BA9D; --color-primary-subtle: #251B17; --color-background: #130E0C; --color-surface: #1B1411; --color-surface-raised: #241B17; --color-border: #3F312A; --color-border-subtle: #302621; --color-text: #F5E9DE; --color-text-secondary: #C6B4A8; --color-text-on-primary: #140F0C; --color-success: #79C69B; --color-warning: #E5B86A; --color-error: #EA8484; /* Tag category colors */ --tag-origin-bg: #293341; --tag-origin-text: #B0CAE7; --tag-vibe-bg: #1F3833; --tag-vibe-text: #A0D9CD; --tag-technique-bg: #322C45; --tag-technique-text: #C9B4E6; --tag-equipment-bg: #3B2E20; --tag-equipment-text: #F1C88E; --tag-preference-bg: #3C2535; --tag-preference-text: #EFB7D5; --tag-dietary-bg: #253827; --tag-dietary-text: #AFE1B4; /* Gradient placeholder palette */ --gradient-1-from: #362922; --gradient-1-to: #261C17; --gradient-2-from: #30241D; --gradient-2-to: #221A15; --gradient-3-from: #3D2F27; --gradient-3-to: #2B211B; } /* -------------------------------------------------------------------------- Theme: Black Miso (Dark) Inspiration: Aged miso paste, caramelized umami, lacquered glaze, depth. -------------------------------------------------------------------------- */ [data-theme="black-miso"] { /* Typography */ --font-family: 'IBM Plex Sans'; /* Semantic colors */ --color-primary: #D4A178; --color-primary-hover: #E1B592; --color-primary-subtle: #2A1D16; --color-background: #15100D; --color-surface: #1D1612; --color-surface-raised: #271D17; --color-border: #44342B; --color-border-subtle: #33271F; --color-text: #F4E8DC; --color-text-secondary: #C5B19F; --color-text-on-primary: #18110D; --color-success: #78C398; --color-warning: #E3B663; --color-error: #E88484; /* Tag category colors */ --tag-origin-bg: #2A3441; --tag-origin-text: #B1CBE8; --tag-vibe-bg: #203934; --tag-vibe-text: #A1DACF; --tag-technique-bg: #342D47; --tag-technique-text: #CBB6E7; --tag-equipment-bg: #3D2F20; --tag-equipment-text: #F1C98F; --tag-preference-bg: #3E2637; --tag-preference-text: #EEB8D6; --tag-dietary-bg: #263928; --tag-dietary-text: #AFE2B5; /* Gradient placeholder palette */ --gradient-1-from: #3A2C23; --gradient-1-to: #291E18; --gradient-2-from: #33271F; --gradient-2-to: #241B15; --gradient-3-from: #413128; --gradient-3-to: #2E231C; } /* -------------------------------------------------------------------------- Theme: Avocado (Dark) Inspiration: Avocado skin, deep olive, charred lime, moody greens. -------------------------------------------------------------------------- */ [data-theme="avocado"] { /* Typography */ --font-family: 'Inter'; /* Semantic colors */ --color-primary: #9DBB76; --color-primary-hover: #B2CC8F; --color-primary-subtle: #1F261A; --color-background: #11150F; --color-surface: #171E14; --color-surface-raised: #212A1D; --color-border: #36442D; --color-border-subtle: #2A3523; --color-text: #EAF2DF; --color-text-secondary: #B6C8A6; --color-text-on-primary: #11150E; --color-success: #79C597; --color-warning: #DDB35C; --color-error: #E68080; /* Tag category colors */ --tag-origin-bg: #263447; --tag-origin-text: #ABC8E9; --tag-vibe-bg: #1D3A35; --tag-vibe-text: #9DDACE; --tag-technique-bg: #302D47; --tag-technique-text: #C4B5E8; --tag-equipment-bg: #3B311E; --tag-equipment-text: #EEC890; --tag-preference-bg: #3A2839; --tag-preference-text: #EAB9DB; --tag-dietary-bg: #1F3B25; --tag-dietary-text: #ACE1B3; /* Gradient placeholder palette */ --gradient-1-from: #2D3B25; --gradient-1-to: #202A1B; --gradient-2-from: #283420; --gradient-2-to: #1B2416; --gradient-3-from: #344429; --gradient-3-to: #26321F; } /* ========================================================================== 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); }