/* ============================================================
Pastello Books — Colors & Type tokens
============================================================
Single source of truth for the Pastello brand visual foundations.
Import once in any HTML and use the CSS custom properties everywhere.
Fonts ship via Google Fonts (link in ):
============================================================ */
:root {
/* ---------- PASTELLO COLOR PALETTE ---------- */
/* Neutrals — warm ivory & cream, the "printed page" base */
--ivory: #F6F1E5;
--cream: #FBF7EE;
--sand: #EFE7D2;
--warm-gray-100: #E6DFCB;
--warm-gray-300: #C9C0A6;
--warm-gray-500: #8C8470;
--warm-gray-700: #5A5544;
--warm-gray-900: #2F2C22;
/* Forest Green — primary brand colour */
--forest-900: #0F2E26;
--forest-800: #1A3D32;
--forest-700: #214A3D; /* primary CTA fill */
--forest-600: #2D5C4C;
--forest-500: #467863;
--forest-300: #9CBDA9;
--forest-100: #D8E5DA;
/* Pencil wordmark accents */
--pencil-red: #C84A2E;
--pencil-yellow: #F2C94C;
--pencil-cream: #FAF1DC;
/* Muted storybook accents */
--sage: #A8C49A;
--sage-bg: #DCE6CB;
--sage-deep: #7CA17E;
--coral: #E89789;
--coral-bg: #F6D5CC;
--coral-deep: #C66B5C;
--mustard: #E6B453;
--mustard-bg: #F5DFA8;
--mustard-deep: #B98426;
--lavender: #B7A3C9;
--lavender-bg: #E0D6EA;
--teal-acc: #7CADB0;
--teal-acc-bg: #C4DCDD;
/* Legacy lwc aliases — keep so any remaining lwc-var refs still render
(will be cleaned up progressively). Mapped to closest Pastello values. */
--lwc-cream-50: var(--cream);
--lwc-cream-100: var(--ivory);
--lwc-cream-200: var(--sand);
--lwc-cream-300: var(--warm-gray-100);
--lwc-navy-900: var(--forest-900);
--lwc-navy-700: var(--forest-800);
--lwc-navy-500: var(--forest-600);
--lwc-navy-300: var(--forest-300);
--lwc-forest-900: var(--forest-900);
--lwc-forest-700: var(--forest-700);
--lwc-forest-500: var(--forest-500);
--lwc-gold-700: var(--mustard-deep);
--lwc-gold-500: var(--mustard);
--lwc-gold-300: var(--pencil-yellow);
--lwc-gold-100: var(--mustard-bg);
--lwc-rose-500: var(--coral);
--lwc-rose-300: var(--coral-bg);
--lwc-rose-100: #fde8e3;
--lwc-sage-500: var(--sage);
--lwc-sage-300: var(--sage-bg);
--lwc-sage-100: var(--forest-100);
--lwc-ink-900: var(--warm-gray-900);
--lwc-ink-700: var(--warm-gray-700);
--lwc-ink-500: var(--warm-gray-500);
--lwc-ink-300: var(--warm-gray-300);
--lwc-ink-100: var(--warm-gray-100);
/* ---------- SEMANTIC COLOR ROLES ---------- */
--bg-canvas: var(--ivory);
--bg-surface: var(--cream);
--bg-surface-warm: var(--cream);
--bg-subtle: var(--sand);
--fg-primary: var(--forest-900);
--fg-secondary: var(--forest-700);
--fg-muted: var(--warm-gray-500);
--fg-on-brand: var(--cream);
--fg-on-accent: var(--forest-900);
--brand-primary: var(--forest-700);
--brand-primary-h: var(--forest-800);
--brand-accent: var(--coral);
--brand-accent-h: var(--coral-deep);
--border-soft: var(--sand);
--border-strong: var(--forest-700);
/* Warm-tinted shadows (never neutral gray) */
--shadow-xs: 0 1px 2px rgba(60, 50, 30, 0.06);
--shadow-sm: 0 2px 8px rgba(60, 50, 30, 0.06);
--shadow-md: 0 6px 16px rgba(60, 50, 30, 0.07);
--shadow-lg: 0 14px 28px rgba(60, 50, 30, 0.10);
--shadow-xl: 0 24px 48px rgba(60, 50, 30, 0.12);
/* Legacy shadow aliases */
--shadow-card: var(--shadow-sm);
--shadow-lift: var(--shadow-lg);
--shadow-press: inset 0 2px 4px rgba(60, 50, 30, 0.10);
/* ---------- TYPE FAMILIES ---------- */
--font-display: 'Nunito', 'Inter', system-ui, sans-serif;
--font-sans: 'Nunito', 'Inter', system-ui, sans-serif;
--font-serif: 'Nunito', 'Inter', system-ui, sans-serif; /* unified — Nunito throughout */
--font-display-name: 'Bricolage Grotesque', 'Avenir Next', 'Nunito', sans-serif;
--font-script: 'Bricolage Grotesque', 'Avenir Next', 'Nunito', sans-serif;
/* ---------- TYPE SCALE ---------- */
--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.05;
--lh-snug: 1.2;
--lh-normal: 1.5;
--lh-loose: 1.65;
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-caps: 0.12em;
/* ---------- SPACING SCALE (8px 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: 88px;
--space-10: 120px;
/* ---------- RADII ---------- */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 999px;
/* ---------- MOTION ---------- */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 420ms;
/* ---------- LAYOUT ---------- */
--container-max: 1280px;
--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
============================================================ */
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 {
font-family: var(--font-display);
font-weight: 900;
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-display);
font-weight: 800;
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-display);
font-weight: 800;
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-display);
font-weight: 700;
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--fg-primary);
}
.t-h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-lg);
line-height: var(--lh-snug);
color: var(--fg-primary);
}
.t-lede {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-lg);
line-height: var(--lh-loose);
color: var(--fg-primary);
text-wrap: pretty;
}
.t-body {
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 {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-2xs);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--mustard-deep);
}
.t-script {
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-display);
font-style: italic;
font-weight: 400;
font-size: var(--fs-xl);
line-height: var(--lh-snug);
color: var(--fg-secondary);
text-wrap: pretty;
}
.t-balance { text-wrap: balance; }
.t-pretty { text-wrap: pretty; }
@keyframes lwcHeroFade {
0% { opacity: 0; transform: translateY(8px) scale(.988); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@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); }
}