/* ============================================================ Magic Wand's Design System colors_and_type.css ============================================================ */ /* ---------- Webfonts ---------- */ /* Pull all three from Google Fonts. Fraunces uses variable axes (SOFT, opsz) — we set them via font-variation-settings on .display. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700;9..144,900&family=Outfit:wght@300;400;500;600&family=Shrikhand&display=swap'); /* ============================================================ TOKENS ============================================================ */ :root { /* ---------- Color: primary surface ---------- */ --midnight: #1a0d2e; /* dominant background */ --midnight-deep: #120822; /* deeper variant — section breaks, footer */ --midnight-lift: #251544; /* card backgrounds */ --midnight-edge: #3a2560; /* borders, hairlines */ /* ---------- Color: gold accent ---------- */ --gold: #f5c842; /* sparkle, CTAs, Shrikhand highlight */ --gold-deep: #d9a823; /* pressed / darker hover */ --gold-glow: #ffe28a; /* sparkle highlight, gradient terminus */ /* ---------- Color: cream foreground ---------- */ --cream: #f8f1d8; /* body text on dark */ --cream-dim: #cdc3a4; /* secondary text, captions */ /* ---------- Color: rare accents ---------- */ --portal: #ff8a5b; /* warm portal-light, used sparingly */ /* ---------- Semantic foregrounds / backgrounds ---------- */ --bg: var(--midnight); --bg-elevated: var(--midnight-lift); --bg-deep: var(--midnight-deep); --fg: var(--cream); --fg-muted: var(--cream-dim); --fg-accent: var(--gold); --border: var(--midnight-edge); /* ---------- Type families ---------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-accent: 'Shrikhand', 'Fraunces', Georgia, serif; /* italic-feeling accent word */ --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---------- Type scale ---------- */ --fs-hero: clamp(56px, 9vw, 132px); --fs-h1: clamp(40px, 6vw, 88px); --fs-h2: clamp(32px, 4.5vw, 56px); --fs-h3: 28px; --fs-h4: 22px; --fs-body-lg: 19px; --fs-body: 17px; --fs-body-sm: 15px; --fs-eyebrow: 13px; --fs-caption: 13px; /* ---------- Line heights ---------- */ --lh-display: 0.95; --lh-heading: 1.1; --lh-body: 1.6; --lh-tight: 1.3; /* ---------- Letter spacing ---------- */ --tracking-display: -0.02em; --tracking-body: 0; --tracking-eyebrow: 0.18em; /* ---------- Spacing scale (4px base) ---------- */ --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; /* ---------- Radii ---------- */ --radius-sm: 12px; /* tags */ --radius-md: 20px; /* buttons, inputs */ --radius-lg: 28px; /* cards */ --radius-xl: 40px; /* hero panels */ --radius-full: 999px; /* pills */ /* ---------- Shadows ---------- */ --shadow-card: 0 1px 0 0 rgba(255, 226, 138, 0.04) inset, 0 24px 48px -16px rgba(0, 0, 0, 0.5); --shadow-gold: 0 12px 32px -8px rgba(245, 200, 66, 0.4); --shadow-glow: 0 16px 48px -8px rgba(245, 200, 66, 0.55), 0 0 0 1px rgba(255, 226, 138, 0.15) inset; /* ---------- Easing ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-chunky: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-linear: linear; /* ---------- Durations ---------- */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 600ms; /* ---------- Layout ---------- */ --container: 1200px; --gutter: var(--space-5); } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display headline — Fraunces 900 with the SOFT axis pushed for rounded terminals. Apply .display to override. */ .display, h1, h2, h3 { font-family: var(--font-display); font-weight: 900; font-variation-settings: "SOFT" 100, "opsz" 144; line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--fg); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); } h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); } h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; line-height: var(--lh-tight); } /* Hero — biggest scale */ .hero-headline { font-family: var(--font-display); font-weight: 900; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: var(--tracking-display); text-wrap: balance; } /* The Shrikhand accent word — always gold, slightly larger optical weight */ .accent { font-family: var(--font-accent); font-weight: 400; /* Shrikhand only ships one weight */ color: var(--gold); font-style: normal; /* Shrikhand has italic-feeling shapes built in */ letter-spacing: -0.01em; } /* Eyebrow / pill label */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cream); } /* Body copy variants */ p, .body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); color: var(--fg); text-wrap: pretty; } .body-lg { font-size: var(--fs-body-lg); } .body-sm { font-size: var(--fs-body-sm); color: var(--fg-muted); } .caption { font-size: var(--fs-caption); color: var(--fg-muted); } /* Links */ a { color: var(--gold); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--gold-glow); } /* Selection */ ::selection { background: var(--gold); color: var(--midnight); }