/* 绘梦星球 design tokens — single source of truth for color, spacing, radius, type, elevation, motion. Imported by every page. Page-specific styles should reference these vars rather than hard-coding values. Visual language captured in docs/design/v0-redesign.html (approved): - Deeper purple bedroom-night base (#16102b → #281e44) - Warmer orange accent with subtle glow halo - Slightly rounder radii (10 / 16 / 22 / 28) - One extra type step at the top (38px) for hero titles - daylight alt theme written into tokens (no toggle UI yet — flip [data-theme="daylight"] on to activate) */ :root { /* color — backgrounds. Sampled from the 小绿-on-storybook icon: less red-purple than v1 (#16102b), more navy "moonlit story" feel. */ --bg-deep: #1a1638; --bg-up: #2c2750; --hairline: rgba(255,255,255,0.10); /* Layered glow — applied as a bg-image over bg-deep on the body. Cranked up from "subtle" (v1 ~0.18 alpha) to actually-visible so the dino-on-glowing-storybook feel is on every page, not just the icon. Top: leaf-green dusk wash. Bottom: warm storybook glow (the book the dino sits on). Together: "孩子在月光下读发光绘本". */ --bg-glow: radial-gradient(ellipse 100% 60% at 50% -5%, rgba(155,204,138,0.55) 0%, transparent 65%), radial-gradient(ellipse 120% 65% at 50% 110%, rgba(244,213,133,0.48) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 50% 50%, rgba(155,204,138,0.10) 0%, transparent 60%); /* color — surfaces (translucent over backgrounds) */ --surface-1: rgba(255,255,255,0.05); --surface-2: rgba(255,255,255,0.09); --surface-3: rgba(155,204,138,0.16); /* color — text. fg is warm cream (matches the dino's belly + book pages), muted is a softer cool grey (less saturated purple than v1). */ --fg: #f5e9d2; --fg-dim: #d6c8b0; --muted: #968aae; /* color — semantic accents. Primary green pulled from the dino body mid-tone (#9bcc8a) — slightly softer than v1 #92c878, closer to the actual icon. Up/down still saturated for press states. */ --accent: #9bcc8a; /* dino-body leaf green */ --accent-up: #b8de9f; --accent-down: #6ba558; --accent-soft: rgba(155,204,138,0.16); --accent-glow: 0 0 32px rgba(155,204,138,0.42); /* Secondary warm "storybook" tone — the open book the dino sits on. Used sparingly for "story moment" highlights (story-tree badges, cover hints, festival cards). NOT a CTA color. */ --book-glow: #f4d585; --book-glow-soft: rgba(244,213,133,0.18); --positive: #6ec766; --positive-down: #3a8c34; --negative: #ed8773; --negative-down: #c8543d; --info: #9fc0f0; /* secondary action — tell entry */ --info-soft: rgba(159,192,240,0.14); --info-down: #5b87c8; /* spacing — 4-pt scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; /* radius — slightly rounder than v1 */ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* type — body sizes (added 38px hero step) */ --t-xs: 11px; --t-sm: 13px; --t-md: 16px; --t-lg: 19px; --t-xl: 23px; --t-2xl: 30px; --t-3xl: 38px; /* elevation */ --shadow-1: 0 4px 14px rgba(0,0,0,0.32); --shadow-2: 0 12px 36px rgba(146,200,120,0.28); --shadow-3: 0 24px 64px rgba(0,0,0,0.55); /* motion */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --t-fast: 0.15s var(--ease); --t-base: 0.28s var(--ease); --t-slow: 0.5s var(--ease); /* fonts (system stack — no web font fetch) */ --font-sans: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; --font-num: ui-rounded, "SF Pro Rounded", system-ui, "Plus Jakarta Sans", -apple-system, sans-serif; /* legacy aliases — older page CSS still references these names. Kept so migrations stay incremental. New code should use the canonical names. */ --bg: var(--bg-deep); --bubble-mimi: var(--accent-soft); --bubble-user: var(--surface-2); } /* ============================================================ Daylight theme — opt-in via Cream background, the same warm orange accent. Used when the user creates books in the daytime / parents want a brighter reading mode. Toggle UI not yet implemented (todo). ============================================================ */ html[data-theme="daylight"] { /* Cream-paper "open storybook" feel — pulls from the warm-yellow glow on the book in the icon, slightly desaturated for long reading. */ --bg-deep: #fbf5e6; --bg-up: #fffbed; --bg-glow: radial-gradient(ellipse at 50% 0%, rgba(155,204,138,0.22) 0%, transparent 60%), radial-gradient(ellipse at 50% 110%, rgba(244,213,133,0.18) 0%, transparent 50%); --fg: #2d2238; --fg-dim: #4a3d5a; --muted: #9d8db0; --hairline: rgba(45,34,56,0.10); --surface-1: rgba(45,34,56,0.04); --surface-2: rgba(45,34,56,0.08); --surface-3: rgba(95,160,82,0.16); /* Leaf green a shade darker for cream backgrounds (contrast). */ --accent: #5ba14d; --accent-up: #78b96a; --accent-down: #3e7c33; --accent-soft: rgba(91,161,77,0.14); --accent-glow: 0 0 24px rgba(91,161,77,0.32); --book-glow: #d9a648; --book-glow-soft: rgba(217,166,72,0.18); /* Info (secondary action — "自己讲故事" entry). Dark theme uses a light sky blue; on cream it vanishes, so daylight gets a deeper blue with enough contrast to read at 13–16px without becoming "shouty". */ --info: #3a6ec0; --info-soft: rgba(58,110,192,0.10); --info-down: #2d559a; --bubble-mimi: var(--accent-soft); --bubble-user: var(--surface-2); }