/* ============================================ PortionPilot dark tokens (#1179). Loaded right after design-tokens.css; same token names, dark values. Only colours live here: every other token is the same in both themes. ============================================ */ @media screen and (prefers-color-scheme: dark) { :root { /* Night dew (Claude Design "PortionPilot v12 Dark mode", #1179): a green-black page with neutral blocks. Translucent -aNN tokens are the same alpha of their dark base colour. Kept the same in both themes on purpose: --fs-text-inverse (text on Beet), the scrim and what sits on it. The backdrop (--fs-backdrop) is heavier on a dark page: 60% black, per the design. */ --fs-primary: #d3316a; --fs-primary-hover: #c02960; --fs-primary-active: #b3215a; --fs-primary-light: #3a1822; --fs-primary-bg: #4a1f2d; --fs-primary-border: #a8466c; --fs-primary-text: #f07998; --fs-primary-text-hover: #f48aa6; --fs-primary-text-active: #f69db5; --fs-accent: #d3316a; --fs-accent-hover: #c02960; --fs-accent-light: #3a1822; --fs-accent-bg: #3a1822; --fs-accent-border: #a8466c; --fs-success: #f1f0ed; --fs-success-light: #252926; --fs-success-text: #f1f0ed; --fs-error: #f68a4f; --fs-error-light: #2e1d15; --fs-error-text: #f68a4f; --fs-warning: #ebb353; --fs-warning-light: #292211; --fs-warning-text: #ebb353; --fs-macro-protein: #6591e1; --fs-macro-carbs: #3dc6b1; --fs-macro-fat: #f3c351; --fs-macro-kcal: #f1f0ed; --fs-macro-carbs-light: #252926; --fs-macro-fat-light: #252926; --fs-macro-protein-light: #252926; --fs-macro-protein-text: #f1f0ed; --fs-macro-carbs-text: #f1f0ed; --fs-macro-fat-text: #f1f0ed; --fs-macro-protein-zone: rgba(241, 240, 237, 0.12); --fs-macro-carbs-zone: rgba(241, 240, 237, 0.12); --fs-macro-fat-zone: rgba(241, 240, 237, 0.12); --fs-macro-kcal-zone: rgba(241, 240, 237, 0.12); --fs-range-overshoot: #82807b; --fs-range-notch-color: #aaa7a2; --fs-text-primary: #f1f0ed; --fs-text-body: #cccac6; --fs-text-secondary: #cccac6; --fs-text-muted: #aaa7a2; --fs-shade: #ffffff; --fs-shade-a02: rgba(255, 255, 255, 0.02); --fs-shade-a04: rgba(255, 255, 255, 0.04); --fs-shade-a05: rgba(255, 255, 255, 0.05); --fs-shade-a06: rgba(255, 255, 255, 0.06); --fs-shade-a08: rgba(255, 255, 255, 0.08); --fs-shade-a10: rgba(255, 255, 255, 0.1); --fs-shade-a20: rgba(255, 255, 255, 0.2); --fs-bg-inverse: #f1f0ed; --fs-bg-inverse-a95: rgba(241, 240, 237, 0.95); --fs-bg-inverse-muted: #aaa7a2; --fs-text-on-inverse: #0b130d; --fs-text-on-inverse-a10: rgba(11, 19, 13, 0.1); --fs-text-on-inverse-a50: rgba(11, 19, 13, 0.5); --fs-text-on-status: #0b130d; --fs-text-on-macro: #0b130d; --fs-text-on-macro-a14: rgba(11, 19, 13, 0.14); --fs-text-on-macro-a55: rgba(11, 19, 13, 0.55); --fs-text-on-macro-a60: rgba(11, 19, 13, 0.6); --fs-backdrop: rgba(0, 0, 0, 0.6); --fs-sheet-backdrop: rgba(0, 0, 0, 0.6); --fs-bg-primary: #1c1f1c; --fs-bg-primary-a30: rgba(28, 31, 28, 0.3); --fs-bg-primary-a10: rgba(28, 31, 28, 0.1); --fs-bg-primary-a50: rgba(28, 31, 28, 0.5); --fs-bg-primary-a60: rgba(28, 31, 28, 0.6); --fs-bg-primary-a80: rgba(28, 31, 28, 0.8); --fs-bg-primary-a85: rgba(28, 31, 28, 0.85); --fs-bg-primary-a95: rgba(28, 31, 28, 0.95); --fs-bg-primary-a98: rgba(28, 31, 28, 0.98); --fs-bg-primary-a75: rgba(28, 31, 28, 0.75); --fs-bg-secondary: #252926; --fs-bg-tertiary: #2e322f; --fs-bg-hover: #252926; --fs-bg-selected: #2f171d; --fs-border-default: #313532; --fs-border-hover: #3f4440; --fs-border-focus: #f07998; --fs-border-selected: #d3316a; --fs-border-control: #82807b; --fs-disabled-bg: #282b28; --fs-disabled-text: #888682; --fs-recording: #c82462; --fs-recording-hover: #c02960; --fs-accent-a08: rgba(211, 49, 106, 0.08); --fs-accent-a10: rgba(211, 49, 106, 0.1); --fs-accent-a14: rgba(211, 49, 106, 0.14); --fs-accent-a15: rgba(211, 49, 106, 0.15); --fs-accent-a20: rgba(211, 49, 106, 0.2); --fs-accent-a30: rgba(211, 49, 106, 0.3); --fs-accent-a35: rgba(211, 49, 106, 0.35); --fs-accent-a40: rgba(211, 49, 106, 0.4); --fs-error-a15: rgba(246, 138, 79, 0.15); --fs-error-a18: rgba(246, 138, 79, 0.18); --fs-primary-a00: rgba(211, 49, 106, 0); --fs-primary-a02: rgba(211, 49, 106, 0.02); --fs-primary-a03: rgba(211, 49, 106, 0.03); --fs-primary-a05: rgba(211, 49, 106, 0.05); --fs-primary-a08: rgba(211, 49, 106, 0.08); --fs-primary-a10: rgba(211, 49, 106, 0.1); --fs-primary-a12: rgba(211, 49, 106, 0.12); --fs-primary-a15: rgba(211, 49, 106, 0.15); --fs-primary-a18: rgba(211, 49, 106, 0.18); --fs-primary-a20: rgba(211, 49, 106, 0.2); --fs-primary-a25: rgba(211, 49, 106, 0.25); --fs-primary-a28: rgba(211, 49, 106, 0.28); --fs-primary-a30: rgba(211, 49, 106, 0.3); --fs-primary-a35: rgba(211, 49, 106, 0.35); --fs-primary-a40: rgba(211, 49, 106, 0.4); --fs-primary-a45: rgba(211, 49, 106, 0.45); --fs-primary-a50: rgba(211, 49, 106, 0.5); --fs-primary-a60: rgba(211, 49, 106, 0.6); --fs-primary-a62: rgba(211, 49, 106, 0.62); --fs-recording-a00: rgba(200, 36, 98, 0); --fs-recording-a18: rgba(200, 36, 98, 0.18); --fs-recording-a20: rgba(200, 36, 98, 0.2); --fs-recording-a30: rgba(200, 36, 98, 0.3); --fs-recording-a40: rgba(200, 36, 98, 0.4); --fs-recording-a50: rgba(200, 36, 98, 0.5); --fs-success-a00: rgba(241, 240, 237, 0); --fs-success-a05: rgba(241, 240, 237, 0.05); --fs-success-a10: rgba(241, 240, 237, 0.1); --fs-success-a15: rgba(241, 240, 237, 0.15); --fs-success-a20: rgba(241, 240, 237, 0.2); --fs-success-a22: rgba(241, 240, 237, 0.22); --fs-success-a30: rgba(241, 240, 237, 0.3); --fs-success-a40: rgba(241, 240, 237, 0.4); --fs-success-a50: rgba(241, 240, 237, 0.5); --fs-text-primary-a04: rgba(241, 240, 237, 0.04); --fs-text-primary-a05: rgba(241, 240, 237, 0.05); --fs-text-secondary-a05: rgba(204, 202, 198, 0.05); --fs-text-secondary-a06: rgba(204, 202, 198, 0.06); --fs-text-secondary-a08: rgba(204, 202, 198, 0.08); --fs-text-secondary-a10: rgba(204, 202, 198, 0.1); --fs-text-secondary-a15: rgba(204, 202, 198, 0.15); --fs-text-secondary-a25: rgba(204, 202, 198, 0.25); --fs-text-secondary-a40: rgba(204, 202, 198, 0.4); --fs-warning-a05: rgba(235, 179, 83, 0.05); --fs-warning-a13: rgba(235, 179, 83, 0.13); --fs-warning-a15: rgba(235, 179, 83, 0.15); --fs-warning-a20: rgba(235, 179, 83, 0.2); --fs-warning-a30: rgba(235, 179, 83, 0.3); --fs-warning-a34: rgba(235, 179, 83, 0.34); --fs-warning-a50: rgba(235, 179, 83, 0.5); --fs-shadow-lg: 0 -1px 0 rgba(255, 255, 255, 0.06), 0 -12px 40px rgba(0, 0, 0, 0.55); --fs-shadow-xl: 0 -1px 0 rgba(255, 255, 255, 0.06), 0 -12px 40px rgba(0, 0, 0, 0.55); --fs-loading-overlay-bg: rgba(11, 19, 13, 0.9); --fs-bg-page: #0b130d; --fs-shadow-dialog: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.55); } }