/* * Mysh Design System — Colors & Type · LIGHT MODE * -------------------------------------------------------------- * The daytime-storybook variant of the Mysh system. Same brand * DNA (house purple, rainbow Play!, hero-slot colors, Pokémon * card treatment) translated onto a warm off-white canvas. * * Every token matches a name in `colors_and_type.css` so any * component can drop this stylesheet in as a direct replacement. * Use this for print, support docs, shareable story pages, and * any surface that needs to feel like a children's book (paper, * light) rather than a planetarium (dark, glowing). */ @import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Inter+Tight:wght@400;500;600;700;800&family=Permanent+Marker&display=swap"); :root { /* ---------------------------------------------------------- * SURFACE — a warm, lilac-tinted off-white. Never stark #fff; * always the faintest violet wash so the brand's purple feels * native. This replaces the dark cosmic gradient. * -------------------------------------------------------- */ --p0-bg-start: #ffffff; --p0-bg-mid: #faf7ff; /* lilac whisper */ --p0-bg-end: #f5f0ff; /* lilac mist */ --p0-bg-gradient: linear-gradient( 160deg, var(--p0-bg-start) 0%, var(--p0-bg-mid) 55%, var(--p0-bg-end) 100% ); --setup-bg-gradient: linear-gradient( 135deg, #ffffff 0%, #f5f0ff 50%, #faf4ff 100% ); /* ---------------------------------------------------------- * PURPLE — the house color. Shifted 1 step deeper for the * contrast it needs on light surfaces (WCAG AA on white). * -------------------------------------------------------- */ --p0-purple: #6d28d9; /* violet-700 — primary */ --p0-purple-light: #7c3aed; /* violet-600 — hover / link */ --p0-purple-soft: #a78bfa; /* violet-400 — decorative */ --p0-purple-deep: #4c1d95; /* violet-900 — heading accent */ --p0-purple-dark: #2e1065; /* indigo-ish deep — only for pressed */ --p0-violet-500: #8b5cf6; --p0-fuchsia-600: #c026d3; /* Faint purple tints used for surfaces / borders / halos */ --p0-purple-tint-50: #faf5ff; --p0-purple-tint-100: #f3e8ff; --p0-purple-tint-200: #e9d5ff; --p0-purple-tint-border: #e6dcff; /* ---------------------------------------------------------- * HERO SLOT PALETTE (P1 / P2) — LIGHT * Saturated, deeper versions of the dark-mode slots so hero * names stay legible on white. The "grad" (Go-button) stays * identical to dark mode — that rainbow is a brand signature. * Bubble backgrounds use a warm tint (~10% sat) + deeper border. * -------------------------------------------------------- */ --p1-name: #b45309; /* amber-700 — legible on white */ --p1-text-light: #92400e; /* amber-800 — secondary */ --p1-grad-from: #b45309; --p1-grad-to: #d97706; --p1-bubble-bg: #fffaf0; /* amber-50-ish */ --p1-bubble-border: #fcd34d; /* amber-300 */ --p2-name: #be123c; /* rose-700 */ --p2-text-light: #9f1239; /* rose-800 */ --p2-grad-from: #be123c; --p2-grad-to: #e11d48; --p2-bubble-bg: #fff1f2; /* rose-50 */ --p2-bubble-border: #fda4af; /* rose-300 */ /* ---------------------------------------------------------- * PLAY! RAINBOW — IDENTICAL to dark mode. Brand signature. * -------------------------------------------------------- */ --play-gradient: linear-gradient( 90deg, #22c55e, #3b82f6, #a855f7, #8b5cf6, #ec4899, #f97316, #eab308, #22c55e ); /* ---------------------------------------------------------- * INK — paper text hierarchy. Ink is indigo-950 (`#1e1b4b`), * not neutral black — it shares DNA with the brand purple and * feels warmer on cream. * -------------------------------------------------------- */ --fg: #1e1b4b; /* indigo-950 — primary */ --fg-soft: #312e81; /* indigo-900 — headings extra weight */ --fg-muted: #475569; /* slate-600 — body */ --fg-dim: #64748b; /* slate-500 — hint, placeholder */ --fg-subtle: #94a3b8; /* slate-400 — caption */ --fg-ghost: rgba(30, 27, 75, 0.45); /* Card surfaces — warm paper, not cold glass */ --card-bg: #ffffff; --card-bg-strong: #ffffff; --card-bg-tinted: #faf7ff; /* tinted variant for nested cards */ --card-border: #e6dcff; /* violet-tinted 1px border */ --card-border-strong: #c4b5fd; /* violet-300 — more prominent */ /* Pills */ --pill-bg: #f3e8ff; /* purple-100 — default chip */ --pill-bg-hover: #e9d5ff; /* purple-200 */ --pill-bg-selected: #6d28d9; /* solid violet-700 — selected chip */ /* ---------------------------------------------------------- * SEMANTIC — tuned for white backgrounds * -------------------------------------------------------- */ --success: #16a34a; /* green-600 */ --warning: #d97706; /* amber-600 */ --warn-deep: #b45309; --danger: #dc2626; /* red-600 */ --danger-strong: #be123c; /* rose-700 */ --hazard-yellow: #f59e0b; /* amber-500 — MAX VIBES stripes on black */ /* ---------------------------------------------------------- * TYPE — unchanged from dark mode * -------------------------------------------------------- */ --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: "Crimson Text", Georgia, serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --font-display: "Permanent Marker", "Inter Tight", sans-serif; --font-hand: "Caveat", "Permanent Marker", cursive; --t-display: 700 clamp(2.5rem, 6vw, 4rem)/1.05 var(--font-display); --t-h1: 800 clamp(1.75rem, 3vw, 2.25rem)/1.1 var(--font-sans); --t-h2: 800 1.5rem/1.15 var(--font-sans); --t-h3: 700 1.25rem/1.2 var(--font-sans); --t-title-card: 700 1.375rem/1.2 var(--font-sans); --t-body: 400 1rem/1.55 var(--font-sans); --t-body-serif: 400 16.5px/2 var(--font-serif); --t-dialogue: italic 400 15.5px/1.8 var(--font-serif); --t-label: 700 0.8125rem/1.3 var(--font-sans); --t-eyebrow: 700 10.5px/1.3 var(--font-sans); --t-hint: italic 400 11px/1.4 var(--font-sans); --t-mono: 400 10px/1.3 var(--font-mono); --t-button: 800 1rem/1.1 var(--font-sans); --track-eyebrow: 0.25em; --track-tight: -0.02em; /* ---------------------------------------------------------- * RADII — identical to dark mode * -------------------------------------------------------- */ --r-pill: 9999px; --r-xl: 24px; --r-lg: 14px; --r-md: 10px; --r-sm: 6px; /* ---------------------------------------------------------- * SHADOWS — completely re-tuned. Dark mode used stark black. * Light mode uses COLORED shadows (violet / rose-tinted) — * the brand's purple halo carries through to depth. * -------------------------------------------------------- */ --shadow-card: 0 18px 40px -10px rgba(124, 58, 237, 0.22), 0 4px 12px rgba(30, 27, 75, 0.06); --shadow-pill: 0 6px 18px -4px rgba(124, 58, 237, 0.28), 0 2px 4px rgba(30, 27, 75, 0.05); --shadow-float: 0 24px 60px -12px rgba(124, 58, 237, 0.30), 0 8px 20px rgba(30, 27, 75, 0.08); --shadow-drop-text: 0 1px 0 rgba(255, 255, 255, 0.9); --shadow-inner-glow: inset 0 0 0 2px var(--p0-purple); --blur-glass: 0px; /* no glass in light mode — solid paper */ --blur-glass-lg: 0px; } /* ------------------------------------------------------------ * BASE / SEMANTIC ELEMENTS * ---------------------------------------------------------- */ html, body { margin: 0; min-height: 100%; background: var(--p0-bg-gradient); background-attachment: fixed; color: var(--fg); font: var(--t-body); } h1 { font: var(--t-h1); letter-spacing: var(--track-tight); color: var(--fg); margin: 0; } h2 { font: var(--t-h2); letter-spacing: var(--track-tight); color: var(--fg); margin: 0; } h3 { font: var(--t-h3); color: var(--fg); margin: 0; } p { font: var(--t-body); color: var(--fg-muted); margin: 0; } small, .eyebrow { font: var(--t-eyebrow); color: var(--p0-purple); text-transform: uppercase; letter-spacing: var(--track-eyebrow); } .narration { font: var(--t-body-serif); color: var(--fg-muted); } .dialogue { font: var(--t-dialogue); color: var(--fg); } .hint { font: var(--t-hint); color: var(--fg-dim); } code { font: var(--t-mono); color: var(--fg-muted); } .mysh-wordmark { font-family: var(--font-display); letter-spacing: 0.02em; color: var(--p0-purple); }