/* ============================================================
Learn with Coloring — Colors & Type tokens
============================================================
This is the single source of truth for the brand's visual
foundations. Import this once in any HTML and use the CSS
custom properties everywhere.
The fonts ship via Google Fonts (link in ):
============================================================ */
:root {
/* ---------- COLOR PALETTE ---------- */
/* Canvas — warm oatmeal cream. Never stark white. */
--lwc-cream-50: #FBF7EF; /* default page bg */
--lwc-cream-100: #F6F0E1; /* card / subtle panel */
--lwc-cream-200: #ECE3CE; /* hairline divider / quiet bg */
--lwc-cream-300: #DCCFB1;
/* Storybook Navy — primary brand color. Grounded, premium. */
--lwc-navy-900: #14213D; /* darkest, body text on cream */
--lwc-navy-700: #1F2F55; /* default brand fill */
--lwc-navy-500: #324872;
--lwc-navy-300: #6A7E9F;
/* Deep Forest — alt primary, swap-in for seasonal / variant brand */
--lwc-forest-900: #1B2E22;
--lwc-forest-700: #2C4A37;
--lwc-forest-500: #4A7156;
/* Mustard / Muted Gold — the "Magic" accent. Buy buttons,
sparkles, audio upsell highlights. Use sparingly. */
--lwc-gold-700: #B7882E;
--lwc-gold-500: #D4A24C; /* default accent */
--lwc-gold-300: #E6C078;
--lwc-gold-100: #F4E2B8;
/* Dusty Rose — soft accent for category chips, illustrations */
--lwc-rose-500: #C99090;
--lwc-rose-300: #E1B4B4;
--lwc-rose-100: #F2D9D9;
/* Sage Green — soft accent, pairs with rose */
--lwc-sage-500: #8AA08A;
--lwc-sage-300: #B4C5B0;
--lwc-sage-100: #DCE6D5;
/* Functional grays — desaturated, warm-leaning */
--lwc-ink-900: #1A1A1A;
--lwc-ink-700: #3D3D3D;
--lwc-ink-500: #6B6B6B;
--lwc-ink-300: #A8A296;
--lwc-ink-100: #D9D2C3;
/* ---------- SEMANTIC COLOR ROLES ---------- */
--bg-canvas: var(--lwc-cream-50);
--bg-surface: #FFFFFF;
--bg-surface-warm: var(--lwc-cream-100);
--bg-subtle: var(--lwc-cream-200);
--fg-primary: var(--lwc-navy-900); /* body */
--fg-secondary: var(--lwc-navy-700);
--fg-muted: var(--lwc-ink-500);
--fg-on-brand: var(--lwc-cream-50); /* text on navy */
--fg-on-accent: var(--lwc-navy-900); /* text on gold */
--brand-primary: var(--lwc-navy-700);
--brand-primary-h: var(--lwc-navy-900); /* hover, darker */
--brand-accent: var(--lwc-gold-500); /* CTAs, sparkles */
--brand-accent-h: var(--lwc-gold-700);
--border-soft: var(--lwc-cream-200);
--border-strong: var(--lwc-navy-700);
--shadow-card: 0 1px 2px rgba(20, 33, 61, 0.04),
0 8px 24px rgba(20, 33, 61, 0.06);
--shadow-lift: 0 4px 12px rgba(20, 33, 61, 0.08),
0 16px 40px rgba(20, 33, 61, 0.10);
--shadow-press: inset 0 2px 4px rgba(20, 33, 61, 0.10);
/* ---------- TYPE FAMILIES ---------- */
--font-serif: 'Lora', 'Recoleta', 'Playfair Display', Georgia, serif;
--font-sans: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif;
--font-script: 'Caveat', 'Pacifico', cursive;
/* ---------- TYPE SCALE ----------
Modular scale ~1.2, tuned for storybook warmth.
Use semantic vars below, not raw sizes. */
--fs-2xs: 12px;
--fs-xs: 14px;
--fs-sm: 16px;
--fs-md: 18px;
--fs-lg: 22px;
--fs-xl: 28px;
--fs-2xl: 36px;
--fs-3xl: 48px;
--fs-4xl: 64px;
--fs-5xl: 80px;
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.5;
--lh-loose: 1.65;
--tracking-tight: 0;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-caps: 0.12em;
/* ---------- 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: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--radius-pill: 999px;
/* ---------- MOTION ---------- */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 400ms;
/* ---------- LAYOUT ---------- */
--container-max: 1200px;
--container-pad: clamp(20px, 4vw, 56px);
}
html,
body {
overflow-x: hidden;
}
img,
svg,
video,
canvas {
max-width: 100%;
}
button,
input,
textarea,
select {
font: inherit;
}
button,
a,
input,
textarea,
select {
-webkit-tap-highlight-color: transparent;
}
/* ============================================================
SEMANTIC TYPE ROLES
Apply these classes (or @extend / mixin from your framework)
instead of hand-setting font + size + weight everywhere.
============================================================ */
html, body {
background: var(--bg-canvas);
color: var(--fg-primary);
font-family: var(--font-sans);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.t-display { /* hero, splash, marketing top-of-page */
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-primary);
text-wrap: balance;
}
.t-h1 {
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--fs-3xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-primary);
text-wrap: balance;
}
.t-h2 {
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--fs-2xl);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
color: var(--fg-primary);
text-wrap: balance;
}
.t-h3 {
font-family: var(--font-serif);
font-weight: 600;
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--fg-primary);
}
.t-h4 {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--fg-primary);
}
.t-lede { /* sub-headline under a display */
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-lg);
line-height: var(--lh-loose);
color: var(--fg-secondary);
text-wrap: pretty;
}
.t-body { /* default paragraph */
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--fg-primary);
}
.t-body-lg {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-md);
line-height: var(--lh-loose);
color: var(--fg-primary);
}
.t-caption {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-xs);
line-height: var(--lh-normal);
color: var(--fg-muted);
}
.t-eyebrow { /* the small caps over a heading */
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-2xs);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--brand-accent);
}
.t-script { /* personalized name on product mocks */
font-family: var(--font-script);
font-weight: 600;
font-size: var(--fs-3xl);
line-height: 1;
color: var(--brand-primary);
}
.t-quote {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--fg-secondary);
text-wrap: pretty;
}
/* Utility */
.t-balance { text-wrap: balance; }
.t-pretty { text-wrap: pretty; }
@media (max-width: 720px) {
:root {
--fs-lg: 20px;
--fs-xl: 25px;
--fs-2xl: 31px;
--fs-3xl: 42px;
--fs-4xl: 52px;
--fs-5xl: 60px;
--container-pad: clamp(20px, 6vw, 28px);
}
.t-display {
font-size: clamp(42px, 12vw, 58px);
line-height: 1.06;
}
.t-h1 {
font-size: clamp(34px, 9vw, 44px);
}
.t-h2 {
font-size: clamp(28px, 7vw, 36px);
}
.t-h3 {
font-size: clamp(24px, 6vw, 30px);
}
.t-lede,
.t-body-lg {
font-size: 17px;
line-height: 1.6;
}
}
@media (max-width: 480px) {
:root {
--container-pad: 20px;
}
.t-display {
font-size: clamp(40px, 12vw, 52px);
}
}