/* ========================================================================== Maui Design System — Design Tokens "Sunday Kitchen" design language Source of truth for every visual value in the Maui app. NEVER hardcode a color, font, or spacing value — use these variables. If a new value is needed, ADD it here first, then reference it. ========================================================================== */ /* ── Google Fonts ─────────────────────────────────────────────────────────── Playfair Display → editorial headers (serif, magazine feel) DM Sans → body & UI (clean, friendly) DM Mono → data labels, nutrition numbers ─────────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'); :root { /* ========================================================================= COLOR — Warm undertones everywhere. No pure white. No pure gray. Primary orange comes from Maui the cat's fur. ========================================================================= */ /* ── Primary ─────────────────────────────────────────────────────────────── */ /* Amber-gold primary — pulled from Maui's illustrated fur color. History: started as warm terra-orange (#E07A35), briefly shifted to pale honey-gold (#E3B36B) on 2026-05-19 — that read too washed against cream backgrounds. Settled at #E7A038 same day: deeper amber, more saturated, still feels native to the cat illustrations but holds presence as a CTA color. */ --color-primary: #E7A038; /* Brand amber-gold — CTAs, active states, Maui's fur */ --color-primary-hover: #CE8A22; /* Slightly darker — button hover state */ --color-primary-muted: #D69547; /* Slightly de-saturated primary — for contexts where full brightness feels shouty */ --color-primary-light: #F0B760; /* Lighter amber — highlights, hover tints */ --color-primary-border-muted: #E8CB9B; /* Dusty mid-amber — dashed borders, muted outlines on pale primary surfaces */ --color-primary-surface: #FDF2E0; /* Pale amber — tag fills, pill backgrounds */ --color-primary-surface-warm: #F8DEB4; /* Warmer pale amber — user chat bubbles, "echo primary" surfaces that need more presence */ /* ── Backgrounds & Surfaces ──────────────────────────────────────────────── */ --color-bg: #FEFBF9; /* Main app background — near-white with hair of warmth (gradient top) */ --color-bg-gradient-end: #FCF6F1; /* Bottom of body gradient — whisper warmer than top */ --color-surface: #F0EEE8; /* Linen surface — warm-neutral grey (pulled away from beige, still warm) */ --color-surface-hover: #E8E6DE; /* Linen surface hover state */ --color-surface-elevated: #FFFEFE; /* Elevated cards, buttons — essentially white. Lifts clearly above the warm bg gradient. */ --color-border: #EAE6DD; /* Dividers, input borders — light warm-grey (reads as grey, not brown) */ /* ── Text ────────────────────────────────────────────────────────────────── */ --color-text-primary: #2C1A0E; /* Primary body text — warm near-black */ --color-text-secondary: #6B5040; /* Supporting text — mid warm brown */ --color-text-tertiary: #9C8878; /* Placeholders, captions — soft muted brown */ /* ── Semantic ────────────────────────────────────────────────────────────── */ --color-dark: #2E2017; /* Deepest tone — overlays, code backgrounds */ --color-dark-hover: #3B2A1E; /* Dark surface hover state */ --color-success: #6B8F62; /* On-track / success green */ --color-success-surface: #EEF4EB; /* Success badge background fill */ --color-amber: #C99A3C; /* Warning / streak highlight amber */ --color-amber-surface: #FDF8EE; /* Warning badge background fill */ --color-danger: #E05E5E; /* Error / destructive — error messages, sign-out, delete confirms. NOT for "favorited" heart state (that's brand red, not danger semantics). */ --color-danger-surface: #FBEBEA; /* Pale warm rose — danger badge background fill */ /* ── Icon tinting palette (settings rows, decorative icons) ─────────────── Coherent saturated set used to tint settings-row + nav icons by category. Distinct from semantic colors — these are illustration accents only, NEVER for status / success / warning / destructive. */ --icon-blue: #4A90E2; /* Account, info, neutral category icons */ --icon-red: var(--color-danger); /* Destructive icons (sign out, delete) */ --icon-purple: #9D6FD4; /* Personality / preference category icons */ --icon-pink: #D85AA5; /* Connection / sharing category icons */ /* ── Saved/favorited heart-red ───────────────────────────────────────── Airbnb-style brand red for the "saved" state on bookmark / heart icons. NOT --color-danger — danger is semantic (errors, destructive confirms); this is a positive/affectionate signal. Used by recipe-card, recipe-detail save action, day-screen meal hearts. */ --color-saved-red: #FF385C; /* ========================================================================= TYPOGRAPHY — Editorial meets friendly ========================================================================= */ /* ── Font Families ───────────────────────────────────────────────────────── */ --font-display: 'Playfair Display', serif; /* Display headings, recipe names */ --font-body: 'DM Sans', sans-serif; /* All UI text, buttons, body copy */ --font-mono: 'DM Mono', monospace; /* Data labels, nutrition values */ /* ── Font Sizes ──────────────────────────────────────────────────────────── */ --text-xs: 11px; /* Micro labels, badges, legal copy */ --text-sm: 13px; /* Captions, secondary metadata */ --text-base: 15px; /* Default body copy */ --text-lg: 18px; /* Large body, card titles */ --text-xl: 22px; /* Section headings */ --text-2xl: 28px; /* Screen titles */ --text-3xl: 36px; /* Display / hero text */ /* ── Font Weights ────────────────────────────────────────────────────────── */ --weight-regular: 400; /* Body copy, descriptions */ --weight-medium: 500; /* Labels, subtle emphasis */ --weight-semibold: 600; /* Buttons, card titles */ --weight-bold: 700; /* Headings, strong emphasis */ /* ── Line Heights ────────────────────────────────────────────────────────── */ --leading-tight: 1.2; /* Headings, large display text */ --leading-snug: 1.35; /* Sub-headings, card titles */ --leading-normal: 1.5; /* Default body copy */ --leading-relaxed: 1.65; /* Long-form, onboarding body */ /* ── Letter Spacing ──────────────────────────────────────────────────────── */ --tracking-tight: -0.01em; /* Large display text */ --tracking-normal: 0; /* Default — body copy */ --tracking-wide: 0.04em; /* Uppercase labels, tags */ --tracking-wider: 0.08em; /* Spaced-out caps */ /* ========================================================================= SPACING — semantic scale ========================================================================= */ --space-xs: 4px; /* Tight internal gaps — icon + label, inline elements */ --space-sm: 8px; /* Small gaps — list item padding, tag internals */ --space-md: 12px; /* Default component internal padding */ --space-lg: 16px; /* Standard section gaps, card padding */ --space-xl: 20px; /* Generous spacing — hero sections */ --space-2xl: 32px; /* Large section separation, screen margins */ /* ========================================================================= BORDER RADIUS — from subtle to pill-shaped ========================================================================= */ --radius-sm: 8px; /* Small chips, input fields */ --radius-md: 12px; /* Default cards, buttons */ --radius-lg: 16px; /* Large cards, bottom sheets */ --radius-xl: 20px; /* Feature cards, modals */ --radius-2xl: 24px; /* Hero cards, prominent surfaces */ --radius-pill: 100px; /* Pills, tags, FAB — fully rounded */ --radius-circle: 50%; /* Avatars, icon circles */ /* ========================================================================= SHADOWS — warm-tinted, never pure black ========================================================================= */ --shadow-sm: 0 2px 16px rgba(30, 18, 8, 0.08); /* Subtle lift — cards, chips */ --shadow-lg: 0 16px 40px -12px rgba(30, 18, 8, 0.12); /* Strong lift — modals, sheets */ --shadow-fab: 0 12px 28px -8px rgba(231, 160, 56, 0.36); /* Amber glow — FAB / Ask Maui (matches --color-primary RGB) */ --shadow-card-soft: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(30, 18, 8, 0.04), 0 10px 28px -10px rgba(30, 18, 8, 0.10); /* Apple-style: inset white hairline stroke + tight contact + soft diffuse lift. */ --shadow-primary-glow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 4px rgba(231, 160, 56, 0.15), 0 12px 28px -6px rgba(231, 160, 56, 0.32); /* Liquid-glass primary: top inner highlight + tight contact + soft colored glow (matches --color-primary RGB) */ /* Companion height token — back buttons + liquid-glass chips share the same height so they align horizontally in a top bar. iOS standard is 44pt for tap targets but visual size is typically 40px. Used by .icon-btn--liquid-glass + .week-chip + .pg-back + cook-prep .back. */ --height-glass-button: 40px; /* ───────────────────────────────────────────────────────────────────────── LIQUID GLASS — Apple iOS 26 / WWDC 2025 design language. Sourced from a Figma kit using Figma's native "Glass" effect spec: Light: -45° at 80% Refraction: 100 Depth: 16 Dispersion: 0 Frost: 7 Splay: 6 Fill stack: #F7F7F7 100% / #DDDDDD 100% / #FFFFFF 65% Drop shadow: X:0 Y:8 Blur:40 Spread:0 rgba(0,0,0,0.12) CSS approximates ~85% of the visual — refraction, dispersion, and gyroscope-driven splay can't be replicated in CSS. The full effect ships natively in React Native via iOS 26 APIs in Phase 2. ───────────────────────────────────────────────────────────────────────── */ --shadow-liquid-glass: 0 8px 40px 0 rgba(0, 0, 0, 0.12); --shadow-liquid-glass-rim: inset 1px 1px 2px rgba(255, 255, 255, 0.85), inset -1px -1px 2px rgba(0, 0, 0, 0.06); --gradient-liquid-glass: radial-gradient(circle at 50% 50%, #F7F7F7 60%, #DDDDDD 100%); --color-liquid-glass-veil: rgba(255, 255, 255, 0.65); --blur-liquid-glass: blur(7px) saturate(1.2); /* On-dark variant — same recipe, warm-cream tints for cook-mode dark theme. */ --gradient-liquid-glass-dark: radial-gradient(circle at 50% 50%, rgba(245, 235, 217, 0.18) 60%, rgba(245, 235, 217, 0.08) 100%); --color-liquid-glass-veil-dark: rgba(245, 235, 217, 0.10); --shadow-liquid-glass-dark: 0 8px 40px 0 rgba(0, 0, 0, 0.32); --shadow-liquid-glass-rim-dark: inset 1px 1px 2px rgba(245, 235, 217, 0.18), inset -1px -1px 2px rgba(0, 0, 0, 0.20); /* ========================================================================= TRANSITIONS — snappy, consistent motion ========================================================================= */ --duration-fast: 0.1s; /* Instant feedback — taps, color flips */ --duration-base: 0.2s; /* Standard interaction — hover, focus */ --duration-slow: 0.3s; /* Screen transitions, content shifts */ --duration-sheet: 0.28s; /* Standardized sheet/overlay slide duration */ --ease-default: ease; /* General-purpose easing */ --ease-out: ease-out; /* Elements entering view */ --ease-in-out: ease-in-out; /* Symmetric slide transitions */ --ease-sheet: cubic-bezier(.32, 1, .6, 1); /* Sheet/overlay easing — standardized everywhere */ /* Interaction scale transforms — "the whole system breathes together" */ --scale-icon-active: 0.96; /* Icons + icon buttons on :active */ --scale-chip-active: 0.97; /* Chips, pills, tokens on :active */ --scale-button-active: 0.98; /* Primary / secondary / ghost buttons on :active */ --scale-card-active: 0.99; /* Tappable cards on :active */ /* Focus ring — one rule everywhere via :focus-visible */ --focus-ring-color: var(--color-primary); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ========================================================================= LAYOUT — phone frame, safe areas, containers ========================================================================= */ --viewport-width: 390px; /* iPhone 14 / standard mobile canvas */ --viewport-height: 844px; /* iPhone 14 / standard mobile height */ --safe-area-top: 54px; /* Status-bar clearance */ --safe-area-bottom: 34px; /* Home-indicator clearance */ --nav-height: 80px; /* Bottom tab-bar height */ --container-padding: 16px; /* Default horizontal screen padding */ /* ========================================================================= Z-INDEX — layering scale ========================================================================= */ --z-base: 1; /* Default stacking */ --z-sticky: 10; /* Sticky headers, tab bars */ --z-nav: 100; /* Bottom navigation */ --z-overlay: 500; /* Dim overlays, scrims */ --z-modal: 600; /* Modals, bottom sheets */ --z-fab: 700; /* Floating action button (Ask Maui) */ --z-toast: 800; /* Toast notifications */ } /* =========================================================================== COOK-MODE DARK THEME Scoped via [data-theme="cook"]. Applied to all 5 cook flow screens (overview, prep, steps, done, rate) when the user is actively in a cook session. Outside cook flow, the app stays in light mode. Brand-preserving warm dark — NOT pure black + cool gray. The vibe is "cozy kitchen at dusk" — deep warm browns + cream + ember-glow terra. Components consuming `var(--color-bg)`, `var(--color-text-primary)`, etc. automatically inherit the dark values when wrapped in
. See CLAUDE.md "Cook-Mode Dark Theme" for the design rationale. =========================================================================== */ [data-theme="cook"] { /* ── Backgrounds & Surfaces ──────────────────────────────────────────────── */ --color-bg: #1A1208; /* Deep warm brown — main bg */ --color-bg-gradient-end: #221A0F; /* Slightly lifted, for body gradient bottom */ --color-surface: #221810; /* Linen-equivalent — sits between bg and elevated */ --color-surface-hover: #2A1E14; --color-surface-elevated: #2A1C10; /* "White card" equivalent — lifted warm brown */ --color-border: rgba(245, 235, 217, 0.12); /* Cream alpha hairline — adaptive over any cook surface. Reconciled w/ RN cookColors.ts 2026-07-05. */ /* ── Text ────────────────────────────────────────────────────────────────── */ --color-text-primary: #F5EBD9; /* Warm cream, was the cream bg in light mode */ --color-text-secondary: #C4B49C; /* Warm gray, lifted */ --color-text-tertiary: #8A7A65; /* Muted warm gray — captions, meta */ /* ── Primary (amber-gold) — slight bump for contrast on dark ─────────────── */ /* Light-mode primary #E7A038 needs slight lift on the deep warm brown to read as ember glow instead of chart-ink. #F1B560 keeps the amber character with enough luminosity for AA contrast. */ --color-primary: #F1B560; /* Lifted amber for dark-mode contrast */ --color-primary-hover: #F4C381; --color-primary-muted: #DDA45F; --color-primary-light: #F6CC8E; --color-primary-surface: rgba(241, 181, 96, 0.12); /* Pale amber glow */ --color-primary-surface-warm: rgba(241, 181, 96, 0.18); --color-primary-border-muted: #6B4523; /* ── Semantic — adjusted for dark ────────────────────────────────────────── */ --color-dark: #0E0905; /* Deeper than bg — for any "darker than dark" contexts */ --color-success: #8FBF85; /* Lifted success */ --color-success-surface: rgba(143, 191, 133, 0.15); --color-amber: #E8B547; /* Lifted amber for cat-tip callouts */ --color-amber-surface: rgba(232, 181, 71, 0.15); /* ── Shadows — softer on dark, mostly elevation via lift not shadow ──────── */ --shadow-card-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-primary-glow: 0 6px 20px rgba(241, 181, 96, 0.28); /* matches dark-mode --color-primary */ }