/* Updated: Saturday 2026-09-05 * * The neo design tokens. * * Transcribed from the design system this app ports -- tokens/colors.css, * typography.css, spacing.css, effects.css, motion.css and themes.css in * `_found-screens/screens/03-design-system-v1/`. The values are that system's, * unchanged. Nothing downstream writes a hex, an rgba or a shadow of its own: * a hand-written value is a defect, because it does not follow when a theme * changes the token under it. * * TWO DELIBERATE DEPARTURES FROM THE SOURCE, BOTH ABOUT FONTS * * 1. The source imports Fredoka, Nunito Sans and Space Mono from Google Fonts. * A font import is a build-time network fetch, which is what forced Life Hub * to self-host in the first place. Fredoka and Mulish are already in this * repository as woff2 -- common/static/common/fonts/ -- and are declared * below from there. Mulish is the product's body face and stands in for * Nunito Sans, which the source itself marks as a substitution. * 2. There is no self-hosted monospace, so --font-mono is the platform's own * stack. It is used for small figures and timestamps only. * * THREE THEMES. `signature` is this file as declared and sets no attribute. * `neo` and `dark` are the two [data-theme] blocks at the foot, written on * by the session and by Alpine. Every value they change is a token, so * a theme moves the whole surface at once and no screen needs a theme branch. */ @font-face { font-display: swap; font-family: "Fredoka"; font-style: normal; font-weight: 300 700; src: url("../common/fonts/Fredoka-VariableFont_wght-latin.9591efe1be62.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Mulish"; font-style: normal; font-weight: 200 1000; src: url("../common/fonts/Mulish-VariableFont_wght-latin.50220d0057de.woff2") format("woff2"); } :root { /* ---- Brand palette ------------------------------------------------- */ --indigo-050: #e7e3fe; --indigo-100: #c6bcff; --indigo-300: #9280fa; --indigo-500: #5a49f8; /* the one primary action */ --indigo-600: #4632e8; --indigo-700: #3624c4; --mint-050: #defef1; --mint-100: #bffee2; --mint-300: #7cfdc9; --mint-400: #69fcc3; --mint-500: #12fea2; /* the signature accent */ --mint-600: #06d389; --violet-050: #ece3fe; --violet-400: #b79efe; --violet-500: #9e7bfb; --violet-600: #7a54ec; --fuchsia-050: #fcdff1; --fuchsia-100: #f9c3e6; --fuchsia-300: #f58bd3; --fuchsia-500: #ef6fc6; --fuchsia-600: #de44ae; --lime-050: #eeffcb; --lime-500: #b6ff3d; --sky-050: #d6ecff; --sky-500: #2e9bff; --coral-050: #ffe6da; --coral-500: #ff7a45; /* ---- Ink. Cool, deep-indigo tinted, never a neutral grey ----------- */ --ink-900: #140442; --ink-700: #362a5e; --ink-500: #625680; --ink-400: #857ca0; --ink-300: #b4aecb; --ink-200: #dad6e8; --ink-100: #ebe8f3; --ink-050: #f6f4fb; --white: #ffffff; /* Text and glyphs drawn ON a brand tone -- a mint fill, a lime chip, a * tinted tile. The whole --ink ramp inverts under [data-theme="dark"], but * a tone does not, so --ink-900 on a bright fill turns white-on-mint and * disappears. This one is a literal in every theme, because the ground it * sits on is a literal in every theme. Use it wherever the background is a * brand colour rather than a surface. */ --ink-on-tone: #140442; /* ---- Surfaces ------------------------------------------------------ */ --surface-page: #f3f1fb; --surface-card: var(--white); --surface-sunken: var(--ink-050); --surface-inverse: var(--ink-900); --card-border: 1px solid transparent; --gradient-page: linear-gradient(120deg, #b8fadf 0%, #f2bee4 42%, #d6ccfb 72%, #c9d4fb 100%); --gradient-mint: linear-gradient(150deg, #12fea2 0%, #06d389 100%); --gradient-violet: linear-gradient(150deg, #c2acfe 0%, #8a6bef 100%); --gradient-indigo: linear-gradient(150deg, #6e5cfb 0%, #4632e8 100%); --gradient-fuchsia: linear-gradient(150deg, #fba9e1 0%, #e85fbe 100%); --gradient-holo: linear-gradient(115deg, #bffdeb 0%, #c7b8ff 26%, #fbc7ec 50%, #b8e4ff 74%, #c6ffea 100%); --gradient-aurora: radial-gradient(60% 80% at 12% 18%, rgba(18, 254, 162, 0.45), transparent 60%), radial-gradient(55% 70% at 88% 12%, rgba(245, 143, 214, 0.42), transparent 60%), radial-gradient(70% 90% at 70% 90%, rgba(110, 92, 251, 0.40), transparent 62%), radial-gradient(60% 80% at 25% 85%, rgba(184, 228, 255, 0.40), transparent 60%); /* ---- Text ---------------------------------------------------------- */ --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-on-brand: var(--white); --text-link: var(--indigo-500); /* ---- Borders ------------------------------------------------------- */ --border-subtle: var(--ink-100); --border-default: var(--ink-200); --border-strong: var(--ink-900); /* ---- Feedback ------------------------------------------------------ */ --success: var(--mint-600); --success-050: var(--mint-050); --warning: #ff7a45; --warning-050: #ffe6da; --danger: #f0416b; --danger-050: #fde3ec; --info: var(--indigo-500); --info-050: var(--indigo-050); /* ---- Type ---------------------------------------------------------- */ --font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif; --font-body: "Mulish", ui-rounded, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --text-hero: 68px; --text-h1: 44px; --text-h2: 32px; --text-h3: 24px; --text-title: 20px; --text-lg: 18px; --text-base: 16px; --text-sm: 14px; --text-xs: 13px; --text-eyebrow: 13px; --leading-tight: 1.02; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-eyebrow: 0.14em; --tracking-tight: -0.02em; --tracking-normal: 0; /* ---- Space. One scale, 4px base ------------------------------------ */ --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; --gutter: 24px; --container-max: 1280px; --container-pad: 32px; /* ---- Radius -------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; /* ---- Depth --------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(20, 4, 66, 0.08); --shadow-sm: 0 1px 3px rgba(20, 4, 66, 0.10), 0 4px 10px rgba(20, 4, 66, 0.08); --shadow-md: 0 2px 5px rgba(20, 4, 66, 0.08), 0 12px 24px rgba(20, 4, 66, 0.12), 0 26px 48px rgba(20, 4, 66, 0.10); --shadow-lg: 0 4px 10px rgba(20, 4, 66, 0.10), 0 20px 40px rgba(20, 4, 66, 0.16), 0 44px 80px rgba(20, 4, 66, 0.16); --shadow-brand: 0 4px 10px rgba(90, 73, 248, 0.24), 0 16px 32px rgba(90, 73, 248, 0.30); --shadow-mint: 0 4px 10px rgba(18, 254, 162, 0.20), 0 16px 32px rgba(18, 254, 162, 0.24); --card-line: 3px solid #140442; --float-shadow: 6px 6px 0 #140442, 0 22px 36px -12px rgba(20, 4, 66, 0.24); --float-shadow-sm: 4px 4px 0 #140442, 0 12px 22px -10px rgba(20, 4, 66, 0.20); /* ---- Motion -------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* ===== DARK. Inverts the ink ramp onto deep-indigo surfaces ============= */ [data-theme="dark"] { --ink-900: #fbfaff; --ink-700: #e3def5; --ink-500: #b3aad6; --ink-400: #948bb8; --ink-300: #5e5585; --ink-200: #322863; --ink-100: #221953; --ink-050: #160e3e; --surface-card: linear-gradient(180deg, #241a54 0%, #170f3c 100%); --surface-sunken: #100a2e; --surface-page: #070320; --border-subtle: #2c2360; --border-default: #3a2e72; --card-line: 1.5px solid rgba(206, 193, 255, 0.24); --float-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.12), inset 0 -22px 34px -24px rgba(0, 0, 0, 0.7), 0 32px 64px -18px rgba(0, 0, 0, 0.95), 0 0 0 1.5px rgba(206, 193, 255, 0.16), 0 0 52px -10px rgba(90, 73, 248, 0.6); --float-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 18px 34px -14px rgba(0, 0, 0, 0.9), 0 0 0 1.5px rgba(206, 193, 255, 0.14), 0 0 28px -8px rgba(90, 73, 248, 0.5); /* THE TINTS INVERT WITH THE INK, OR TEXT DISAPPEARS. * * A tint is a chip's ground and --ink-900 is its text. This theme flips * --ink-900 from #140442 to near-white, so every tint left at its light * value carries white text on a pale ground. Measured on the rendered * pixels before this block existed: lime 1.02:1, mint 1.09:1, coral * 1.15:1, sky 1.17:1, fuchsia 1.19:1 -- invisible, against a floor of * 4.5:1. The source theme inverted three tints and stopped; these five are * the rest of the same set, in the same families, at the same depth. */ --indigo-050: #2a1f68; --violet-050: #2e1a5c; --mint-050: #0e3b33; --mint-100: #11493f; --lime-050: #2b3a12; --sky-050: #122b4a; --coral-050: #4a2216; --fuchsia-050: #4a1a38; --gradient-page: radial-gradient(120% 80% at 50% -12%, #1c1250 0%, transparent 55%), linear-gradient(160deg, #0a0526 0%, #070320 60%, #05020f 100%); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.55), 0 26px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08); --shadow-brand: 0 6px 22px rgba(90, 73, 248, 0.6); --shadow-mint: 0 6px 22px rgba(18, 254, 162, 0.35); color-scheme: dark; } /* ===== NEO. Hard borders, offset shadows, flat ground =================== */ [data-theme="neo"] { --surface-card: #ffffff; --surface-page: #fce3f2; --surface-sunken: #fbeff7; --card-border: 2.5px solid var(--ink-900); --card-line: 3px solid var(--ink-900); --float-shadow: 7px 7px 0 var(--ink-900), 0 18px 28px -14px rgba(20, 4, 66, 0.22); --float-shadow-sm: 5px 5px 0 var(--ink-900), 0 12px 20px -10px rgba(20, 4, 66, 0.18); --border-subtle: var(--ink-900); --border-default: var(--ink-900); --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-pill: 8px; --shadow-xs: 2px 2px 0 var(--ink-900); --shadow-sm: 3px 3px 0 var(--ink-900); --shadow-md: 5px 5px 0 var(--ink-900); --shadow-lg: 8px 8px 0 var(--ink-900); --shadow-brand: 5px 5px 0 var(--ink-900); --shadow-mint: 5px 5px 0 var(--ink-900); --gradient-page: linear-gradient(0deg, #fce3f2 0%, #fce3f2 100%); }