/* * BeautySeoul design tokens — the single source of truth for color, type, * spacing, radius, motion, and depth. Two layers: * * 1. Primitives (--palette-*, raw scales): theme-independent raw values. * 2. Semantic (--color-*, --space-*, ...): role tokens that MAP to * primitives. Components use ONLY semantic tokens, never primitives. * * Swap the whole theme by setting `data-theme` on (default = "jade", * from the landing page). A theme is just a set of semantic -> primitive * remappings; see the [data-theme="porcelain-plum"] block and * design-system/README.md. Full spec: docs/product/DESIGN.md. * * NOTE: The mobile RN app's authoritative tokens live in mobile/src/theme.ts * (Porcelain & Plum) — the app no longer consumes this CSS. This file serves * the web/landing surfaces; the "porcelain-plum" theme below mirrors the RN * language for web parity. */ :root { /* ------------------------------------------------------------------ */ /* 1. Primitives — raw palette (theme-independent) */ /* ------------------------------------------------------------------ */ /* Jade (primary family) */ --palette-jade-500: #0F7B68; --palette-jade-700: #075A4D; /* Orchid (brand family) */ --palette-orchid-500: #6B4CF6; --palette-orchid-700: #5637E8; --palette-orchid-050: #F1EDFF; /* Plum (Porcelain & Plum — mirrors mobile/src/theme.ts) */ --palette-plum-500: #6E2D50; /* deep plum primary */ --palette-plum-700: #571F3D; /* plum strong */ --palette-plum-050: #F4E7EC; /* plum wash / soft */ --palette-porcelain: #F6F3EF; /* warm stone-white ground */ --palette-porcelain-alt: #EFEAE3; /* grouped surface */ --palette-ink-plum: #241B21; /* plum-black ink */ --palette-ink-plum-soft: #6C5F66; /* secondary plum ink */ --palette-hairline-brass: #DCCFBB; /* brass-tinted rule */ --palette-brass: #A88544; /* metallic detail: rules, stars */ --palette-warm-wash-blush: #F9EDE8;/* blush wash behind imagery */ /* Neutrals / surfaces */ --palette-paper: #F7F9F7; /* green-tinted paper (jade theme bg) */ --palette-lavender-white: #FBFAFF; /* cool near-white (orchid theme bg) */ --palette-surface: #FFFFFF; --palette-surface-alt: #EEF4F1; --palette-surface-alt-cool: #F2F0FB; /* Ink / text */ --palette-ink-marine: #12302B; /* green-black ink (jade theme) */ --palette-ink-neutral: #1B1B2A; /* neutral near-black (orchid theme) */ --palette-ink-soft: #5E6E68; --palette-ink-soft-cool: #656175; /* Accents / status */ --palette-coral: #C95E4A; /* warnings, required consent */ --palette-amber: #B56B18; /* non-urgent notice */ --palette-tide: #2F6F91; /* map / route metadata */ --palette-warm-wash: #FFF1F5; /* Seoul atmosphere behind imagery */ --palette-skyline: #DCE9FF; /* distant Seoul photo wash */ --palette-destructive: #B42318; /* removal / irreversible action */ /* Lines / disabled */ --palette-border: #D6E0DC; --palette-border-strong: #A9BBB4; --palette-border-cool: #DED9F0; --palette-disabled: #C6D2CD; --palette-white: #FFFFFF; /* ------------------------------------------------------------------ */ /* 2. Semantic tokens — default theme "jade" (matches the landing) */ /* ------------------------------------------------------------------ */ --color-bg: var(--palette-paper); --color-surface: var(--palette-surface); --color-surface-alt: var(--palette-surface-alt); --color-fg: var(--palette-ink-marine); --color-muted: var(--palette-ink-soft); --color-primary: var(--palette-jade-500); /* actions, selected, progress */ --color-primary-strong: var(--palette-jade-700); --color-on-primary: var(--palette-white); --color-brand: var(--palette-orchid-500); /* onboarding / brand accent */ --color-brand-strong: var(--palette-orchid-700); --color-brand-soft: var(--palette-orchid-050); --color-secondary: var(--palette-tide); --color-accent: var(--palette-coral); /* consent / warnings */ --color-notice: var(--palette-amber); --color-warm-wash: var(--palette-warm-wash); --color-skyline: var(--palette-skyline); --color-border: var(--palette-border); --color-border-strong: var(--palette-border-strong); --color-disabled: var(--palette-disabled); --color-ring: var(--palette-jade-500); --color-destructive: var(--palette-destructive); /* ------------------------------------------------------------------ */ /* Non-color tokens (theme-independent) */ /* ------------------------------------------------------------------ */ /* Typography — WEB/landing stacks (per DESIGN.md §3). The mobile RN app runs its own type in mobile/src/theme.ts: Fraunces (display) + Noto Sans (body). Do not treat these web fonts as app-wide. */ --font-ui: "Aptos", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-display: "New York", "Iowan Old Style", "Georgia", serif; --font-mono: "SF Mono", "Cascadia Mono", "Roboto Mono", monospace; --text-display: 42px; --text-title: 28px; --text-section: 20px; --text-body: 16px; --text-small: 14px; --text-label: 12px; --text-mono: 13px; /* Spacing (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; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; /* Motion */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 240ms; --ease-standard: cubic-bezier(.2, .8, .2, 1); /* Depth */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(18, 48, 43, .05), 0 8px 22px rgba(18, 48, 43, .06); --shadow-2: 0 2px 4px rgba(18, 48, 43, .07), 0 14px 36px rgba(18, 48, 43, .10); } /* * Alternate theme "porcelain-plum" — the founder-directed Porcelain & Plum * language shipped in the mobile RN app (mobile/src/theme.ts, 2026-07-04). * Set to bring web/landing surfaces into * parity. Only semantic mappings change; components are untouched. The RN app * is authoritative for these values — mirror any change there here. */ [data-theme="porcelain-plum"] { --color-bg: var(--palette-porcelain); /* warm porcelain ground */ --color-surface-alt: var(--palette-porcelain-alt); --color-fg: var(--palette-ink-plum); --color-muted: var(--palette-ink-plum-soft); --color-primary: var(--palette-plum-500); /* deep plum is the app color */ --color-primary-strong: var(--palette-plum-700); --color-brand: var(--palette-jade-500); /* jade = verified accent */ --color-brand-strong: var(--palette-jade-700); --color-brand-soft: var(--palette-plum-050); --color-border: var(--palette-hairline-brass); /* brass-tinted hairline */ --color-ring: var(--palette-plum-500); --shadow-1: 0 1px 2px rgba(46, 28, 36, .05), 0 8px 22px rgba(46, 28, 36, .07); --shadow-2: 0 2px 4px rgba(46, 28, 36, .07), 0 14px 36px rgba(46, 28, 36, .13); } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 1ms; --motion-base: 1ms; --motion-slow: 1ms; } }