/* ============================================================ Stealth Health Recipes — Design System (EduCom Hub-inspired) Light + dark themes via data-theme="dark" on ============================================================ */ :root { color-scheme: light; --bg: #f4f6fb; --bg-soft: #eceff7; --surface: #ffffff; --surface-2: #f8f9fd; --surface-3: #f1f3fa; --border: #e5e8f1; --border-strong: #d5dae8; --text: #161a2c; --text-soft: #42475c; --text-muted: #777e95; /* Green accent — health theme equivalent of EduCom Hub's blue */ --accent: #1a9e5b; --accent-hover: #158048; --accent-contrast: #ffffff; --accent-soft: #e8f5ec; /* Semantic colors */ --amber: #b45309; --gold: #d99b00; --red: #df4249; --blue: #4c5ef1; /* Legacy aliases used throughout component rules */ --green: #1a9e5b; --green-dark: #0f6e3e; --line: var(--border); --card: var(--surface); --muted: var(--text-muted); --ink: var(--text); --ring: color-mix(in srgb, var(--accent) 24%, transparent); --shadow-card: 0 1px 2px rgba(22,26,49,.04), 0 6px 20px -10px rgba(22,26,49,.08); --shadow-pop: 0 12px 28px -6px rgba(22,26,49,.18), 0 30px 70px -20px rgba(22,26,49,.28); --shadow: var(--shadow-card); --radius: 14px; --radius-sm: 10px; /* How much of each edge the phone's own hardware is standing on: the notch or Dynamic Island at the top, the home indicator at the bottom, and in landscape the notch again down one side. Real numbers only because index.html asks for viewport-fit=cover; 0 everywhere else, including every desktop browser, so these are safe to add to any edge measurement. What they do *not* describe is the corner radius — iOS reports no left or right inset in portrait, but the bottom corners still curve away over the last ~20px. Anything sitting in a bottom corner needs its own allowance on top of these; see --mnav-corner in css/mobile-nav.css. */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); } :root[data-theme="dark"] { color-scheme: dark; --bg: #0d0f17; --bg-soft: #131624; --surface: #161a28; --surface-2: #1b2030; --surface-3: #212739; --border: #272e42; --border-strong: #36405c; --text: #e9ecf6; --text-soft: #c6cbdc; --text-muted: #8a91a8; --accent: #3cc285; --accent-hover: #4dd895; --accent-contrast: #0a1f13; --accent-soft: color-mix(in srgb, var(--accent) 17%, transparent); --amber: #f0a13c; --gold: #e0b347; --red: #f37176; --blue: #7d8cff; --green: #3cc285; --green-dark: #6fdaac; --ring: color-mix(in srgb, var(--accent) 30%, transparent); --shadow-card: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px -12px rgba(0,0,0,.5); --shadow-pop: 0 16px 40px -8px rgba(0,0,0,.55), 0 40px 90px -30px rgba(0,0,0,.7); --shadow: var(--shadow-card); }