/* ============================================================================ * Nova Baby — design tokens * ---------------------------------------------------------------------------- * Dark-only "3am clinical" palette. This file is a 1:1 port of the iOS app's * Theme.swift and mirrors docs/design-tokens.md — those two are the sources of * truth. Change them there first, then port here. * * This file defines CUSTOM PROPERTIES ONLY. No component/selector styles. * * - :root static hex fallback (indigo defaults) * - html[data-accent="..."] the five user-selectable accent pairs * - @supports (color-mix ...) re-tints the four surfaces from the accent, * porting Theme.mixHex so switching accent * re-tints surfaces exactly like the app. * * Activity colours are SEMANTIC. They never follow the accent — a feed is * always green, a diaper always amber, regardless of the selected accent. * ========================================================================== */ :root { color-scheme: dark; /* Surfaces */ --background: #0A0C10; --card: #12151C; --elevated: #171A2B; --sheet: #14171F; /* Text */ --text-1: #E9ECF2; --text-2: #8C93A6; --text-3: #565D70; /* Brand (indigo default) */ --accent: #8B8CF0; --accent-bright: #A5A6F6; --on-accent: #0A0C10; /* Activity (semantic — NEVER follow accent) */ --feed: #5BC8AF; --diaper: #D9A853; --alert: #E07A7A; --tummy: #C87BB0; --bath: #6DB3D9; --growth: #9FD96B; /* Lines */ --hairline: rgba(255, 255, 255, 0.08); --subtle-fill: rgba(255, 255, 255, 0.06); /* Type & shape */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --r-card: 14px; --r-card-lg: 16px; --r-sheet: 20px; --r-pill: 999px; } /* ── User-selectable accent pairs ────────────────────────────────────────── * Set on via the data-accent attribute. Indigo is the :root default; * it is listed explicitly here as a no-op for symmetry with the other four. */ html[data-accent="indigo"] { --accent: #8B8CF0; --accent-bright: #A5A6F6; } html[data-accent="moonlight"] { --accent: #7FAEE8; --accent-bright: #9CC4F0; } html[data-accent="rose"] { --accent: #E88BA8; --accent-bright: #F0A6BE; } html[data-accent="gold"] { --accent: #E3B863; --accent-bright: #EFCC85; } html[data-accent="mint"] { --accent: #7ED0B4; --accent-bright: #9BDEC6; } /* ── Accent-tinted surfaces (ports Theme.mixHex) ────────────────────────── * In the app each surface is the accent mixed into a near-black base. These * recipes reproduce that. With the indigo accent they resolve byte-exactly to * the static hexes above; other accents re-tint the surfaces. The static hexes * outside this block are the fallback for browsers without color-mix support. */ @supports (background: color-mix(in srgb, red, blue)) { :root { --background: color-mix(in srgb, var(--accent) 6%, #020402); --card: color-mix(in srgb, var(--accent) 8%, #070B0A); --elevated: color-mix(in srgb, var(--accent) 10%, #0A0D15); --sheet: color-mix(in srgb, var(--accent) 8%, #0A0D0D); } }