/* ============================================================ Skaii Meals — Design Palette Main: #FF00EE (electric magenta) Accent: #FCFE01 (electric yellow) ============================================================ */ :root { /* ── Main (Magenta) ────────────────────────────────────── */ --main-50: #fef0fd; --main-100: #fdd6fb; --main-200: #fba0f6; --main-300: #f96af0; --main-400: #ff2df3; --main-500: #ff00ee; /* base */ --main-600: #d600c7; --main-700: #a8009c; --main-800: #7d0074; --main-900: #55004f; --main-950: #30002c; /* ── Accent (Yellow) ───────────────────────────────────── */ --accent-50: #ffffe8; --accent-100: #feffc2; --accent-200: #fdff8a; --accent-300: #fdfe52; --accent-400: #fcfe24; --accent-500: #fcfe01; /* base */ --accent-600: #d4d501; --accent-700: #a1a201; --accent-800: #7a7b01; --accent-900: #525201; --accent-950: #2e2e00; /* ── Neutrals (cool-shifted) ───────────────────────────── */ --neutral-50: #f4f4f8; --neutral-100: #e2e2ea; --neutral-200: #c5c5d3; --neutral-300: #a3a3b8; --neutral-400: #7e7e98; --neutral-500: #62627a; --neutral-600: #4b4b62; --neutral-700: #38384d; --neutral-800: #26263a; --neutral-900: #161625; --neutral-950: #0c0c18; /* ── Backgrounds ───────────────────────────────────────── */ --bg-base: #0a0a14; --bg-raised: #111120; --bg-overlay: #18182a; --bg-elevated: #202035; --bg-sunken: #06060d; /* ── Surfaces ──────────────────────────────────────────── */ --surface-1: #141422; --surface-2: #1c1c30; --surface-3: #24243c; --surface-4: #2c2c48; /* Translucent glass surface (for cards layered over a mesh / image backdrop where backdrop-filter blur is meaningful). Slightly darker base than --surface-2 for the inset look. */ --surface-glass:rgba(16, 16, 26, 0.7); /* Chrome-glass surface for mobile top/bottom bars — heavier opacity than --surface-glass so content beneath is readable but bars read as opaque at a glance. */ --chrome-glass-bg: rgba(8, 8, 14, 0.92); /* ── Text ──────────────────────────────────────────────── */ --text-primary: #f0f0f6; --text-secondary: #a8a8c0; --text-tertiary: #6e6e8a; --text-disabled: #4a4a60; --text-inverse: #0a0a14; --text-on-main: #ffffff; --text-on-accent: #1a1a00; /* ── Borders ───────────────────────────────────────────── */ --border-default: #2a2a40; --border-subtle: #1e1e32; --border-strong: #3a3a55; --border-focus: var(--main-500); --border-accent: var(--accent-500); /* Translucent hairline border for mobile row separators + section headers. Prefer this over a hardcoded rgba so light mode gets the correct tint. */ --border-subtle-alpha: rgba(255, 255, 255, 0.06); /* ── Interactive States ────────────────────────────────── */ --main-hover: #ff33f1; --main-active: #d600c7; --main-ghost: rgba(255, 0, 238, 0.08); --main-ghost-hover: rgba(255, 0, 238, 0.14); /* Active selection inset ring on dark surfaces (e.g. yellow-dot rows). */ --main-border-active:rgba(255, 0, 238, 0.28); --accent-hover: #fdfe40; --accent-active: #d4d501; --accent-ghost: rgba(252, 254, 1, 0.08); --accent-ghost-hover:rgba(252, 254, 1, 0.14); /* Semantic accent-text — contrast-safe across both themes. Dark mode: accent-700 (#a1a201) on dark surfaces is comfortable. Light mode is overridden in the light block to accent-900 (#525201, ~7:1 on white) so small/tertiary accent labels (FS badges, tertiary labels) keep WCAG AA on light surfaces. */ --accent-text: var(--accent-700); /* Semantic source-library badge text — magenta-family attribution for the Shared Meal Library pick badge (SourceIndicator). Dark mode uses the vivid main-500 (#ff00ee, ~3.24:1 on the void surface, comfortable for the 10px bold uppercase glyph). Light mode is overridden below to main-700 (#a8009c, ~6.68:1 on white) so the badge keeps WCAG AA on Wire surfaces — main-500 itself is only ~3.24:1 on white, below AA for body-size text. Mirrors the --accent-text divergence pattern so the SCSS stays a single token reference with no theme branch. */ --source-library-text: var(--main-500); /* ── Alpha tints (#859-class polish — graduated brand-color overlays). Replaces ad-hoc rgba(brand, alpha) literals scattered across ~25 meal-pool SCSS files. Existing main-ghost / main-ghost-hover / main-border-active values are kept for back-compat; new code should prefer the explicit -tint-NN names so the alpha is readable. ── */ --main-tint-05: rgba(255, 0, 238, 0.05); --main-tint-10: rgba(255, 0, 238, 0.10); --main-tint-18: rgba(255, 0, 238, 0.18); --main-tint-22: rgba(255, 0, 238, 0.22); --main-tint-30: rgba(255, 0, 238, 0.30); --accent-tint-05: rgba(252, 254, 1, 0.05); --accent-tint-10: rgba(252, 254, 1, 0.10); --accent-tint-12: rgba(252, 254, 1, 0.12); --accent-tint-20: rgba(252, 254, 1, 0.20); --accent-tint-22: rgba(252, 254, 1, 0.22); --accent-tint-25: rgba(252, 254, 1, 0.25); --accent-tint-28: rgba(252, 254, 1, 0.28); --accent-tint-30: rgba(252, 254, 1, 0.30); --accent-tint-35: rgba(252, 254, 1, 0.35); /* ── Semantic ──────────────────────────────────────────── */ --error: #ff3b5c; --error-subtle: #3a1020; --error-text: #ff8fa4; --success: #00e676; --success-subtle:#0a2a1a; --success-text: #6effb2; --warning: #ffb300; --warning-subtle:#2a2000; --warning-text: #ffd166; --info: #40c4ff; --info-subtle: #0a1e2a; --info-text: #8ad8ff; /* ── Cuisine Rating Ramp ───────────────────────────────── */ /* Palette-aware 5-step ladder; tested ≥3:1 against --surface-2 (#1c1c30). Spec §6.4 + §9.4. Light-mode overrides below. */ --rating-loved: #ff00ee; /* main-500 — vivid magenta */ --rating-liked: #ff84ec; /* lighter magenta-pink */ --rating-neutral: rgba(255,255,255,0.35); /* white @ 35% opacity */ --rating-disliked: #F97316; /* orange — distinct from red */ --rating-hated: #dc2626; /* red */ /* ── Danger ─────────────────────────────────────────────── */ /* Alias used for destructive-action text (sign-out, delete). Orange keeps it visually distinct from --error (red). Spec §9.4. */ --danger: #F97316; /* ── Glow / Effects ────────────────────────────────────── */ --glow-main: 0 0 20px rgba(255, 0, 238, 0.35); --glow-accent: 0 0 20px rgba(252, 254, 1, 0.30); --glow-main-lg: 0 0 40px rgba(255, 0, 238, 0.25), 0 0 80px rgba(255, 0, 238, 0.10); --glow-accent-lg:0 0 40px rgba(252, 254, 1, 0.20), 0 0 80px rgba(252, 254, 1, 0.08); /* Small-radius glow tokens for dot-row selection + units-btn highlight (S4-2/S4-3). */ --glow-main-sm: 0 0 8px rgba(255, 0, 238, 0.12); --glow-accent-sm:0 0 6px rgba(252, 254, 1, 0.5); /* ── Gradients ─────────────────────────────────────────── */ --gradient-main: linear-gradient(135deg, #ff00ee, #a8009c); --gradient-accent: linear-gradient(135deg, #fcfe24, #d4d501); --gradient-main-accent:linear-gradient(135deg, #ff00ee, #fcfe01); --gradient-surface: linear-gradient(180deg, #1c1c30, #141422); /* ── Radius ────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full:9999px; /* Shared bottom-sheet top-corner radius (S3-4). */ --radius-sheet: 18px; /* ── Spacing ───────────────────────────────────────────── */ --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; /* ── Transitions ───────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; /* ── Typography ────────────────────────────────────────── */ /* IBM Plex Mono = display/chrome (uppercase mono captions, brand mark, section labels). Outfit = body/content (search inputs, descriptions, body copy). Loaded via in index.html. Component SCSS should reference these tokens, never hardcode the family list. */ --font-display: 'IBM Plex Mono', monospace; --font-body: 'Outfit', sans-serif; /* ── Sheet / Mobile Chrome ─────────────────────────────── */ /* Drag-handle dimensions (S3-4). */ --sheet-handle-w: 36px; --sheet-handle-h: 4px; /* Bottom-sheet drop-shadow. Dark mode: heavier ink shadow. (S3-6). */ --sheet-shadow-bottom: 0 -8px 24px rgba(0, 0, 0, 0.6); /* ── Avatar Initials ───────────────────────────────────── */ /* Fixed-contrast text color for avatar initials rendered on the magenta→accent gradient (S2-8). Dark mode: always white so the initials read on any gradient point. Light mode overrides below. */ --avatar-text-fixed: #ffffff; /* ── Cuisine Rating Ghost Tokens ───────────────────────── */ /* Palette-aware tokens for the disliked + hated cuisine pill ghost backgrounds (S5-4). Disliked maps to --danger; hated maps to error. Both defined here so light mode can override the alpha without touching component SCSS. */ --rating-disliked-ghost: rgba(249, 115, 22, 0.10); --rating-disliked-ghost-border: rgba(249, 115, 22, 0.30); --rating-hated-ghost: rgba(220, 38, 38, 0.10); --rating-hated-ghost-border: rgba(220, 38, 38, 0.30); --rating-hated-text: #ef4444; /* ── Phase 9 — Macro Colors ────────────────────────────── */ /* Per-macro accent palette for MacrosLine + meal-detail tiles. Each color is distinct enough from --main-500 (magenta) and --accent-500 (yellow) to read as its own dimension on the dark surface. Light-mode variants below shift toward deeper shades for ≥4.5:1 contrast on the near-white background. */ --macro-protein: #FF3366; /* coral red */ --macro-carbs: #7CFF8C; /* mint green */ --macro-fat: #FFAA1F; /* amber */ --macro-fiber: #3FCEFF; /* sky blue */ /* ── Phase 9 Round-8 — Meal-Type Accents ───────────────── */ /* Per-meal-type accent colors used by MealTypeSection + PoolMealCard. The section pill border + name swap to the type accent (option A); the card border + outer glow do too (option B); a 5px left-edge stripe in the type color flags the card (option C); the card-head gradient tints toward the type accent (option D). Snack/dessert/etc. degenerate to the base magenta fallback when their type isn't represented. */ --meal-type-breakfast: #FCFE01; /* yellow — same as accent */ --meal-type-lunch: #00F0FF; /* cyan */ --meal-type-dinner: #FF00EE; /* magenta — same as main */ --meal-type-snack: #79FFAE; /* mint */ --meal-type-dessert: #FF6FB4; /* pink */ --meal-type-pre-workout: #FFAA1F; /* amber — energy */ --meal-type-post-workout: #3FCEFF; /* sky blue — recovery */ --meal-type-brunch: #FCFE01; /* yellow (same band as bkfst) */ --meal-type-morning-snack: #79FFAE; --meal-type-afternoon-snack:#79FFAE; --meal-type-evening-snack: #79FFAE; --meal-type-breakfast-glow: rgba(252, 254, 1, 0.35); --meal-type-lunch-glow: rgba(0, 240, 255, 0.35); --meal-type-dinner-glow: rgba(255, 0, 238, 0.35); --meal-type-snack-glow: rgba(121, 255, 174, 0.35); --meal-type-dessert-glow: rgba(255, 111, 180, 0.35); --meal-type-pre-workout-glow: rgba(255, 170, 31, 0.35); --meal-type-post-workout-glow: rgba(63, 206, 255, 0.35); --meal-type-brunch-glow: rgba(252, 254, 1, 0.35); --meal-type-morning-snack-glow: rgba(121, 255, 174, 0.35); --meal-type-afternoon-snack-glow:rgba(121, 255, 174, 0.35); --meal-type-evening-snack-glow: rgba(121, 255, 174, 0.35); } /* ============================================================ Light Mode Color scales (main, accent, neutral) stay the same — only the semantic tokens that reference them change. Key differences from dark: - Backgrounds flip to light neutrals (cool-white) - Text goes dark - Main 500 still works for buttons/accents (white text on magenta) - Accent 500 is INVISIBLE on white — use 700+ for foreground, 500 only as background fill or on dark surfaces - Glows become subtle shadows (glow looks wrong on light bg) - Semantic subtle backgrounds use light tints, not dark tints ============================================================ */ /* Dual selector — `[data-theme="light"]` for the static design-playground demos (which toggle the attribute via JS); `.skaii-light` for the actual Blazor app where ThemeState binds the class on MudLayout. Either selector triggers the override block on its descendants. */ [data-theme="light"], .skaii-light { /* ── Accent overrides ──────────────────────────────────── */ /* accent-500 (#fcfe01) has ~1.07:1 contrast on white — unusable. */ /* In light mode, shift the "usable" accent range down the scale */ /* so buttons/links/badges land on shades with adequate contrast. */ --accent-500: #a1a201; /* was 500, now maps to dark-700 value */ --accent-400: #c4c601; --accent-300: #d4d501; /* ── Backgrounds ───────────────────────────────────────── */ --bg-base: #f6f5fa; --bg-raised: #ffffff; --bg-overlay: #eeedf4; --bg-elevated: #ffffff; --bg-sunken: #eceaf2; /* ── Surfaces ──────────────────────────────────────────── */ --surface-1: #ffffff; --surface-2: #f8f7fc; --surface-3: #f0eff6; --surface-4: #e8e7f0; /* Translucent glass surface — see Phantom analogue. */ --surface-glass:rgba(255, 255, 255, 0.92); /* Chrome-glass surface for mobile top/bottom bars — light-mode analogue of the dark --chrome-glass-bg. */ --chrome-glass-bg: rgba(246, 245, 250, 0.92); /* ── Text ──────────────────────────────────────────────── */ --text-primary: #16162a; --text-secondary: #52526e; /* WCAG 1.4.3 (AA 4.5:1) — the 2026-07-14 kitchen-history gauntlet audit flagged the old #8888a2 at ~3.1:1 on light surfaces (systemic: every eyebrow/qualifier consumer). #63637d clears AA on ALL light surfaces: 5.81:1 on #ffffff, 5.17:1 on #F2F1F4 (bg-base), 5.09:1 on #f0eff6 (surface-3), 4.74:1 on #e8e7f0 (surface-4) — the reviewer's ~#6b6b85 suggestion missed surface-4 at 4.21:1, hence the darker ink. Still visually lighter than --text-secondary (hierarchy preserved). Keep in lockstep with design/palette.css. */ --text-tertiary: #63637d; --text-disabled: #b4b4c8; --text-inverse: #f0f0f6; --text-on-main: #ffffff; /* Light-mode --accent-500 is remapped to #a1a201 (see the accent ramp note above) — white text on it is ~2.7:1, a WCAG AA failure. Dark ink #1a1a00 (the dark block's value) gives ~7:1. Heals every consumer: ChipFilter .chip--active + the History "Current" badge (grep-verified the only two --text-on-accent consumers, both on --accent-500 fills). */ --text-on-accent: #1a1a00; /* ── Borders ───────────────────────────────────────────── */ --border-default: #dedde8; --border-subtle: #eae9f0; --border-strong: #c8c7d4; --border-subtle-alpha: rgba(0, 0, 0, 0.08); /* ── Interactive States ────────────────────────────────── */ --main-hover: #e600d4; --main-active: #c600b5; --main-ghost: rgba(255, 0, 238, 0.06); --main-ghost-hover: rgba(255, 0, 238, 0.12); --main-border-active:rgba(255, 0, 238, 0.22); --accent-hover: #7a7b01; --accent-active: #525201; --accent-ghost: rgba(120, 122, 1, 0.10); --accent-ghost-hover:rgba(120, 122, 1, 0.18); /* Light-mode override for the semantic accent-text — accent-900 (#525201) gives ~7:1 contrast on white surfaces vs. accent-700 (#a1a201) at 3.4:1 (below WCAG AA for the 8px FS badge). */ --accent-text: #525201; /* Light-mode override for the source-library badge text — main-700 (#a8009c) gives ~6.68:1 on white vs. main-500 (#ff00ee) at ~3.24:1 (below WCAG AA for the 10px badge). Keeps the magenta family so the badge still reads as "library / verified". */ --source-library-text: var(--main-700); /* ── Semantic ──────────────────────────────────────────── */ --error: #dc2647; --error-subtle: #fdeef1; --error-text: #b81a38; --success: #0a9e52; --success-subtle:#e8f8f0; --success-text: #077a3e; --warning: #c88600; --warning-subtle:#fef5e0; --warning-text: #9a6700; --info: #1a8fc9; --info-subtle: #e6f3fb; --info-text: #116a99; /* ── Cuisine Rating Ramp ───────────────────────────────── */ /* Tested ≥3:1 against --surface-2 (#f8f7fc) in light mode. Deeper shades than dark to compensate for the near-white background. */ --rating-loved: #d600c8; /* main-600 — deeper magenta; ≥4.5:1 on white */ --rating-liked: #b347a4; /* muted magenta-purple; ≥3.5:1 on white */ --rating-neutral: rgba(0,0,0,0.30); /* 30% black dot */ --rating-disliked: #c25510; /* dark orange; ≥4.5:1 on white */ --rating-hated: #b91c1c; /* dark red; ≥5:1 on white */ /* ── Danger ─────────────────────────────────────────────── */ --danger: #c25510; /* light-mode dark orange — matches disliked */ /* ── Glow / Effects → Shadows ──────────────────────────── */ --glow-main: 0 2px 12px rgba(255, 0, 238, 0.18); --glow-accent: 0 2px 12px rgba(160, 162, 1, 0.18); --glow-main-lg: 0 4px 24px rgba(255, 0, 238, 0.14), 0 1px 4px rgba(0,0,0,0.06); --glow-accent-lg:0 4px 24px rgba(160, 162, 1, 0.14), 0 1px 4px rgba(0,0,0,0.06); /* Small-radius glow → softer shadows in light mode. */ --glow-main-sm: 0 0 6px rgba(255, 0, 238, 0.08); --glow-accent-sm:0 0 4px rgba(160, 162, 1, 0.30); /* ── Gradients ─────────────────────────────────────────── */ --gradient-main: linear-gradient(135deg, #ff00ee, #d600c7); --gradient-accent: linear-gradient(135deg, #d4d501, #a1a201); --gradient-main-accent:linear-gradient(135deg, #ff00ee, #d4d501); --gradient-surface: linear-gradient(180deg, #ffffff, #f8f7fc); /* ── Sheet / Mobile Chrome ─────────────────────────────── */ /* Light mode: softer shadow so the sheet doesn't look pasted on. (S3-6). */ --sheet-shadow-bottom: 0 -2px 12px rgba(0, 0, 0, 0.12); /* ── Avatar Initials ───────────────────────────────────── */ /* Light mode: dark magenta so initials remain distinct from the bright accent end of the magenta→yellow gradient (S2-8). */ --avatar-text-fixed: #7d0074; /* ── Cuisine Rating Ghost Tokens ───────────────────────── */ /* Light mode: same alpha ratios; error/danger colours already adjusted for light-mode legibility above so the hated token inherits safely. */ --rating-disliked-ghost: rgba(194, 85, 16, 0.10); --rating-disliked-ghost-border: rgba(194, 85, 16, 0.30); --rating-hated-ghost: rgba(185, 28, 28, 0.10); --rating-hated-ghost-border: rgba(185, 28, 28, 0.30); --rating-hated-text: #b91c1c; /* ── Phase 9 — Macro Colors (Light Mode) ──────────────── */ /* Deeper shades for ≥4.5:1 contrast against the near-white surface. */ --macro-protein: #c41540; /* deep coral red */ --macro-carbs: #1f8a3a; /* deep mint */ --macro-fat: #b56b00; /* deep amber */ --macro-fiber: #0a7aa3; /* deep sky blue */ }