/* K-Beauty Routine Calculator — Design Tokens Light mode is default. Dark mode activates via [data-theme="dark"] on . Palette philosophy: Muted sage greens (trustworthy, natural) paired with warm blush (approachable, skin-tone adjacent) on a near-white base. Cool neutrals keep it gender-neutral and non-clinical. Touches of soft teal carry the "dewy glass skin" idea without veering into spa cliché. */ /* ───────────────────────────────────────────── LIGHT MODE (default) ───────────────────────────────────────────── */ :root { /* ── Brand colors ── */ /* Primary: muted sage green — calm, natural, trustworthy */ --color-primary-50: #f2f7f4; --color-primary-100: #e0ede6; --color-primary-200: #bdd8c9; --color-primary-300: #93bda8; --color-primary-400: #649e82; --color-primary-500: #4a8569; /* main primary */ --color-primary-600: #3a6b54; --color-primary-700: #2e5342; --color-primary-800: #243f32; --color-primary-900: #1a2e24; /* Secondary: warm blush/sand — approachable, skin-adjacent, gender-neutral */ --color-secondary-50: #fdf8f5; --color-secondary-100: #f8ede4; --color-secondary-200: #f0d8c6; --color-secondary-300: #e3bda0; --color-secondary-400: #d09b77; --color-secondary-500: #b87d58; /* main secondary */ --color-secondary-600: #9a6444; --color-secondary-700: #7a4e35; --color-secondary-800: #5c3b28; --color-secondary-900: #3d271a; /* Accent: soft teal — the "dewy" pop, used sparingly */ --color-accent-50: #f0fafa; --color-accent-100: #d8f2f2; --color-accent-200: #a9e2e2; --color-accent-300: #71cccc; --color-accent-400: #3db3b3; --color-accent-500: #229898; /* main accent */ --color-accent-600: #1a7878; --color-accent-700: #135c5c; --color-accent-800: #0e4444; --color-accent-900: #092e2e; /* ── Semantic ── */ --color-success: #3d9970; /* earthy green — positive, not harsh */ --color-success-light: #e8f5ee; --color-success-dark: #2a6e4e; --color-warning: #d97706; /* amber — visible without alarm */ --color-warning-light: #fef3c7; --color-warning-dark: #b45309; --color-error: #dc4c4c; /* muted red — clear but not aggressive */ --color-error-light: #fdeaea; --color-error-dark: #b03030; --color-info: #4a85b5; /* soft blue — neutral informational */ --color-info-light: #e8f2fb; --color-info-dark: #2e5f87; /* ── Neutrals ── */ --color-neutral-0: #ffffff; --color-neutral-50: #fafafa; --color-neutral-100: #f4f4f5; --color-neutral-200: #e4e4e7; --color-neutral-300: #d1d1d6; --color-neutral-400: #a1a1aa; --color-neutral-500: #71717a; --color-neutral-600: #52525b; --color-neutral-700: #3f3f46; --color-neutral-800: #27272a; --color-neutral-900: #18181b; /* ── Semantic surface roles ── */ --color-bg: #fafdf9; /* very slightly green-tinted white */ --color-bg-subtle: #f2f7f4; /* primary-50 — used for page sections */ --color-surface: #ffffff; /* cards, inputs, modals */ --color-surface-raised: #ffffff; --color-border: #e0ede6; /* primary-100 */ --color-border-subtle: #f0f4f1; /* ── Text ── */ --color-text-primary: #1a2e24; /* primary-900 — warm near-black */ --color-text-secondary: #52525b; /* neutral-600 */ --color-text-muted: #a1a1aa; /* neutral-400 */ --color-text-inverse: #ffffff; --color-text-on-primary: #ffffff; --color-text-on-secondary: #ffffff; /* ── Interactive states ── */ --color-focus-ring: #93bda8; /* primary-300 — soft, visible */ --color-overlay: rgb(26 46 36 / 0.4); /* ───────────────────────────────────────────── TYPOGRAPHY ───────────────────────────────────────────── */ --font-heading: 'DM Sans', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Scale — mobile-first, slightly smaller at base */ --text-xs: 0.6875rem; /* 11px — captions, labels */ --text-sm: 0.8125rem; /* 13px — secondary body, metadata */ --text-base: 0.9375rem; /* 15px — primary body */ --text-lg: 1.0625rem; /* 17px — large body, card titles */ --text-xl: 1.25rem; /* 20px — h3 */ --text-2xl: 1.5rem; /* 24px — h2 */ --text-3xl: 1.875rem; /* 30px — h1 mobile */ --text-4xl: 2.25rem; /* 36px — h1 desktop */ --text-5xl: 3rem; /* 48px — hero display */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ───────────────────────────────────────────── SPACING — 4px base grid ───────────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ───────────────────────────────────────────── BORDER RADIUS Strategy: consistently soft/rounded — never pill for normal UI, pill only for tags/badges/progress bars. ───────────────────────────────────────────── */ --radius-sm: 0.375rem; /* 6px — inputs, small chips */ --radius-md: 0.625rem; /* 10px — buttons, cards at mobile */ --radius-lg: 1rem; /* 16px — cards, modals */ --radius-xl: 1.5rem; /* 24px — large hero cards, overlays */ --radius-2xl: 2rem; /* 32px — quiz step containers */ --radius-full: 9999px; /* pill — tags, badges, progress track */ /* ───────────────────────────────────────────── SHADOWS Soft, diffuse — no hard drop shadows. Inspired by the frosted/glassy K-beauty packaging aesthetic. ───────────────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 rgb(74 133 105 / 0.06); --shadow-sm: 0 2px 8px 0 rgb(74 133 105 / 0.08), 0 1px 3px 0 rgb(0 0 0 / 0.04); --shadow-md: 0 4px 16px 0 rgb(74 133 105 / 0.10), 0 2px 6px 0 rgb(0 0 0 / 0.06); --shadow-lg: 0 8px 32px 0 rgb(74 133 105 / 0.12), 0 4px 12px 0 rgb(0 0 0 / 0.07); --shadow-xl: 0 16px 48px 0 rgb(74 133 105 / 0.14), 0 8px 24px 0 rgb(0 0 0 / 0.08); /* Inset glow for focused inputs — the "dewy" touch */ --shadow-focus: 0 0 0 3px rgb(147 189 168 / 0.35); --shadow-focus-error: 0 0 0 3px rgb(220 76 76 / 0.25); /* ───────────────────────────────────────────── TRANSITIONS ───────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* for micro-interactions */ --duration-fast: 120ms; --duration-normal: 220ms; --duration-slow: 380ms; --transition-fast: var(--duration-fast) var(--ease-out); --transition-normal: var(--duration-normal) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); /* ───────────────────────────────────────────── LAYOUT ───────────────────────────────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; /* Quiz is intentionally narrow and centered — feels app-like on mobile */ --quiz-max-width: 480px; } /* ───────────────────────────────────────────── DARK MODE Kept muted and warm — not a stark inversion. Backgrounds use deep forest tones, not pure black. ───────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: #111c16; /* deep forest — not pure black */ --color-bg-subtle: #162010; --color-surface: #1e2d22; --color-surface-raised: #253320; --color-border: #2d4035; --color-border-subtle: #243328; --color-text-primary: #f0f7f3; --color-text-secondary: #9db8a8; --color-text-muted: #5a7a68; --color-text-inverse: #111c16; --color-text-on-primary: #111c16; --color-text-on-secondary: #111c16; --color-primary-500: #5fa882; /* slightly lighter for dark bg */ --color-primary-300: #93bda8; --color-accent-500: #3dbbbb; --color-focus-ring: #5fa882; --color-overlay: rgb(0 0 0 / 0.6); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-sm: 0 2px 8px 0 rgb(0 0 0 / 0.3), 0 1px 3px 0 rgb(0 0 0 / 0.2); --shadow-md: 0 4px 16px 0 rgb(0 0 0 / 0.35), 0 2px 6px 0 rgb(0 0 0 / 0.25); --shadow-lg: 0 8px 32px 0 rgb(0 0 0 / 0.40), 0 4px 12px 0 rgb(0 0 0 / 0.30); --shadow-xl: 0 16px 48px 0 rgb(0 0 0 / 0.5), 0 8px 24px 0 rgb(0 0 0 / 0.35); --shadow-focus: 0 0 0 3px rgb(95 168 130 / 0.4); } /* ───────────────────────────────────────────── REDUCED MOTION ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } }