/* ============================================================ sleepArt Design System — Foundations Colors + Typography tokens · Two color concepts share one skeleton. Import into any file: Toggle color concept: or ============================================================ */ /* --- FONTS (Google Fonts) --- */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,400..600,30..100;1,9..144,400..600,30..100&family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Yellowtail&family=Kaushan+Script&family=Monoton&display=swap"); :root { /* ============================================ COLOR CONCEPT 1 — NEON BOLD (default / primary) Dunkle Basis · elektrische Signale ============================================ */ /* Surfaces */ --bg: #0F0E12; /* deep ink-violet black */ --bg-2: #17161C; --bg-3: #1F1D26; --paper: #F7F3EA; /* warm cream, editorial contrast blocks only */ --paper-2:#EFE9DA; /* Ink (text on dark) */ --ink: #F5F1E8; --ink-70: rgba(245, 241, 232, 0.72); --ink-50: rgba(245, 241, 232, 0.55); --ink-30: rgba(245, 241, 232, 0.28); --ink-10: rgba(245, 241, 232, 0.10); /* Dark (text on paper) */ --dark: #17161C; --dark-70: rgba(23, 22, 28, 0.72); --dark-50: rgba(23, 22, 28, 0.55); /* Lines */ --line: rgba(245, 241, 232, 0.14); --line-strong: rgba(245, 241, 232, 0.32); --line-dark: rgba(23, 22, 28, 0.12); /* Signal neons — the 6 signature colors */ --neon-pink: #FF3D9A; --neon-lime: #D4FF3D; --neon-blue: #3D8BFF; --neon-yellow: #FFD84E; --neon-orange: #FF6A3D; --neon-violet: #B84DFF; /* Accent (theme swappable via [data-theme]) */ --accent: var(--neon-pink); --accent-2: var(--neon-lime); --accent-ink: #0F0E12; --accent-soft: color-mix(in oklab, var(--accent) 30%, transparent); /* Apartment character colors (13 rooms, electric versions) */ --c-hygge: #FFB347; --c-blackwhite: #F5F1E8; --c-cream: #FFE7A8; --c-green: #A8FF3D; --c-blue: #3D8BFF; --c-atelier: #FF6A3D; --c-music: #FF3D9A; --c-cozy: #E86B47; --c-matchpoint: #FFF03D; --c-beach: #4DE8E4; --c-roomone: #FFD84E; --c-roomtwo: #6BC8FF; --c-roomthree: #B84DFF; /* --- TYPOGRAPHY --- */ --font-display: "Fraunces", "GT Sectra", Georgia, serif; --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Fluid type scale (rem-based, clamps at edges) */ --step--2: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem); /* 12–13.6 · mono meta */ --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 1rem); /* 14–16 · small body */ --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16–18 · body */ --step-1: clamp(1.25rem, 1.18rem + 0.3vw, 1.4rem); /* 20–22 · lead */ --step-2: clamp(1.5rem, 1.4rem + 0.5vw, 1.85rem); /* 24–30 · h3 */ --step-3: clamp(2rem, 1.8rem + 1vw, 2.75rem); /* 32–44 · h2 */ --step-4: clamp(2.75rem, 2.3rem + 2.2vw, 4.25rem); /* 44–68 · h1 */ --step-5: clamp(3.5rem, 2.8rem + 3.5vw, 6.5rem); /* 56–104 · hero */ --step-6: clamp(4.5rem, 3.2rem + 6vw, 10rem); /* 72–160 · display */ /* --- LAYOUT & SPACING --- */ --max: 1440px; --gutter: clamp(20px, 4vw, 64px); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --radius: 6px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 999px; /* --- MOTION --- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 380ms; --dur-slow: 600ms; /* --- SHADOWS / GLOWS --- */ --shadow-card: 0 30px 60px -20px rgba(0,0,0,0.5); --shadow-hover: 0 30px 60px -20px var(--accent); --shadow-hero: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--line); --glow-accent: 0 0 40px var(--accent); --ring-accent: inset 0 0 0 2px color-mix(in oklab, var(--accent) 50%, transparent); } /* ============================================ COLOR CONCEPT 2 — CREAM (alt / editorial) Warme Basis · Terracotta · Editorial calm ============================================ */ :root[data-concept="cream"] { --bg: #F4EFE7; --bg-2: #EAE3D6; --bg-3: #E0D6C4; --paper: #FBF8F2; --paper-2:#F4EFE7; --ink: #1B1B1A; --ink-70: rgba(27, 27, 26, 0.72); --ink-50: rgba(27, 27, 26, 0.55); --ink-30: rgba(27, 27, 26, 0.32); --ink-10: rgba(27, 27, 26, 0.10); --dark: #1B1B1A; --dark-70: rgba(27, 27, 26, 0.72); --dark-50: rgba(27, 27, 26, 0.55); --line: rgba(27, 27, 26, 0.14); --line-strong: rgba(27, 27, 26, 0.28); --accent: #C8543B; /* Terracotta */ --accent-2: #C8543B; --accent-ink: #FBF8F2; --accent-soft: #E8B8AB; /* Apartment character colors — editorial versions */ --c-hygge: #B48A67; --c-blackwhite: #262626; --c-cream: #E4D5B7; --c-green: #6B8E5A; --c-blue: #3E6C8A; --c-atelier: #D6884F; --c-music: #8B4E5C; --c-cozy: #A6714A; --c-matchpoint: #C8543B; --c-beach: #86A5B0; --c-roomone: #D8A657; --c-roomtwo: #4A7A8A; --c-roomthree: #C77455; /* Cream uses DM Serif Display + regular Inter */ --font-display: "DM Serif Display", "GT Sectra", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --radius: 4px; --radius-lg: 12px; --shadow-hover: 0 20px 40px -20px rgba(27,27,26,0.25); --glow-accent: 0 0 0 3px var(--accent-soft); } /* Alt-accent theme swaps (Neon) */ [data-theme="lime"] { --accent: var(--neon-lime); --accent-2: var(--neon-pink); --accent-ink: #0F0E12; } [data-theme="blue"] { --accent: var(--neon-blue); --accent-2: var(--neon-yellow); --accent-ink: #F5F1E8; } [data-theme="yellow"] { --accent: var(--neon-yellow); --accent-2: var(--neon-violet); --accent-ink: #0F0E12; } [data-theme="violet"] { --accent: var(--neon-violet); --accent-2: var(--neon-lime); --accent-ink: #F5F1E8; } [data-theme="orange"] { --accent: var(--neon-orange); --accent-2: var(--neon-blue); --accent-ink: #0F0E12; } /* Alt-accent theme swaps (Cream) */ :root[data-concept="cream"][data-theme="ocean"] { --accent: #2C5D7A; --accent-soft: #A9C4D6; } :root[data-concept="cream"][data-theme="forest"] { --accent: #5B7A48; --accent-soft: #BFCFAE; } :root[data-concept="cream"][data-theme="aubergine"] { --accent: #6B3A5E; --accent-soft: #C7AEC0; } :root[data-concept="cream"][data-theme="mono"] { --accent: #1B1B1A; --accent-soft: #C9C4BC; } /* ============================================ SEMANTIC TYPE (applies both concepts) ============================================ */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.55; color: var(--ink); background: var(--bg); font-feature-settings: "ss01", "cv11", "kern"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1; letter-spacing: -0.015em; font-variation-settings: "opsz" 144, "SOFT" 30; margin: 0; text-wrap: pretty; } :root[data-concept="cream"] h1, :root[data-concept="cream"] h2, :root[data-concept="cream"] h3, :root[data-concept="cream"] h4 { font-weight: 400; font-variation-settings: normal; } .h-display { font-family: var(--font-display); font-size: var(--step-6); line-height: 0.9; letter-spacing: -0.03em; font-variation-settings: "opsz" 144, "SOFT" 40; font-weight: 500; } .h-hero { font-family: var(--font-display); font-size: var(--step-5); line-height: 0.96; letter-spacing: -0.025em; } .h-1 { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; } .h-2 { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.015em; } .h-3 { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.12; } .lead { font-size: var(--step-1); line-height: 1.42; color: var(--ink-70); max-width: 62ch; } .body { font-size: var(--step-0); line-height: 1.55; } .small { font-size: var(--step--1); } .muted { color: var(--ink-50); } .italic-serif { font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; color: var(--accent); } /* Mono eyebrow — signature meta label */ .eyebrow { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-70); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before { content: ""; width: 1.6em; height: 1px; background: currentColor; opacity: 0.5; } .eyebrow-accent { color: var(--accent); }