/* ============================================================================
Lambert Cleaning — Design System Tokens
============================================================================
Phase 1, Task 1.2 — the single source of truth for every design value on
the redesigned lambertcleaning.com. Every component, every page, every
Phase 2 build file consumes these tokens via CSS custom properties.
Design philosophy:
The Shenandoah Valley is warm, mountain-framed, family-rooted. The brand
is navy + gold — but the old site reads cold and corporate. This palette
keeps navy and gold as anchors, then surrounds them with the warmth of a
cream kitchen, the sage of a Blue Ridge morning, and the bark tones of
an old barn wall. Typography pairs Fraunces (editorial serif with real
character) and Figtree (humanist sans, readable, not a SaaS cliché) —
neither is Inter, neither is Roboto, neither reads like a startup.
Token naming convention:
--{category}-{variant}-{modifier?}
Examples:
--color-navy-500 core brand navy
--color-cream-50 lightest surface
--space-4 16px
--radius-md 8px
--shadow-lg large elevation
--text-3xl 30px type size
--leading-snug 1.25 line-height
--ease-out cubic-bezier easing
============================================================================ */
/* ----------------------------------------------------------------------------
1. COLOR PALETTE
---------------------------------------------------------------------------- */
:root {
/* ---------- Brand: Navy (authority, trust, grounded) ---------- */
/* A warmer navy than the typical icy slate — has a touch of indigo so it
reads rich against cream, not corporate against white. */
--color-navy-50: #EEF1F7;
--color-navy-100: #D4DBE8;
--color-navy-200: #A9B6D0;
--color-navy-300: #7E91B9;
--color-navy-400: #536CA1;
--color-navy-500: #2E456E; /* mid navy — links, accents */
--color-navy-600: #1F3256; /* primary brand */
--color-navy-700: #182746;
--color-navy-800: #111D34;
--color-navy-900: #0A1322; /* deepest — reserved for text on warm-white */
/* ---------- Brand: Gold (warmth, award, celebration) ---------- */
/* Antique brass, not traffic-cone yellow. Reads premium, reads local. */
--color-gold-50: #FBF5E6;
--color-gold-100: #F5E6BD;
--color-gold-200: #EACE84;
--color-gold-300: #DDB557;
--color-gold-400: #C8942D; /* primary gold */
--color-gold-500: #A77A1F;
--color-gold-600: #8B6518;
--color-gold-700: #6E5013;
--color-gold-800: #503A0D;
--color-gold-900: #322408;
/* ---------- Surface: Cream (warm white, linen kitchen) ---------- */
/* These are the background colors. Never use pure #FFF for a primary
surface — cream reads like a Valley farmhouse morning. */
--color-cream-50: #FCFAF5; /* default page background */
--color-cream-100: #F8F3E8; /* card backgrounds, section alternates */
--color-cream-200: #EFE7D3; /* borders, dividers on cream */
--color-cream-300: #DED2B3;
--color-cream-400: #C2B28B;
/* ---------- Accent: Blue Ridge Sage (morning mountain) ---------- */
/* Desaturated sage/slate that references the Blue Ridge without being
clichéd. Used sparingly — success states, quiet accents, whitespace
dividers on cream backgrounds. */
--color-sage-50: #EFF2EE;
--color-sage-100: #D5DDD3;
--color-sage-200: #AAB9A6;
--color-sage-300: #7F957A;
--color-sage-400: #5C7556;
--color-sage-500: #45593F;
--color-sage-600: #334229;
/* ---------- Neutral: Bark (warm grounding, body text) ---------- */
/* Deep warm brown, softer than black. Body text, iconography on cream. */
--color-bark-50: #F3EFEA;
--color-bark-100: #E1D8CB;
--color-bark-200: #C3B4A0;
--color-bark-300: #9F8B73;
--color-bark-400: #6E5E4A;
--color-bark-500: #4A3E30;
--color-bark-600: #3A2F26; /* default body text */
--color-bark-700: #2A211A;
--color-bark-800: #1A140F;
/* ---------- Neutral: Mist (warm grays, borders, muted text) ---------- */
--color-mist-50: #F7F6F3;
--color-mist-100: #EDEAE2;
--color-mist-200: #D7D2C4;
--color-mist-300: #B8B2A3;
--color-mist-400: #938C7D;
--color-mist-500: #6E6859;
--color-mist-600: #4A4538;
/* ---------- Semantic colors ---------- */
--color-success: #4A7C59; /* forest — good form, valid, booked */
--color-success-bg: #E8F0E8;
--color-warning: #C8942D; /* matches gold — caution, review */
--color-warning-bg: #FBF5E6;
--color-error: #9B3225; /* rich brick — form errors */
--color-error-bg: #FBEBE7;
--color-info: #2E456E; /* mid navy — informational callouts */
--color-info-bg: #EEF1F7;
/* ---------- Role-based aliases ---------- */
/* Components should reference these aliases, not raw palette scales, so
future palette tweaks cascade cleanly. */
/* Surfaces */
--surface-page: var(--color-cream-50);
--surface-card: var(--color-cream-100);
--surface-elevated: #FFFFFF; /* rare — only for modals etc */
--surface-inverse: var(--color-navy-600);
--surface-muted: var(--color-mist-100);
/* Text */
--text-default: var(--color-bark-600);
--text-strong: var(--color-navy-900);
--text-muted: var(--color-mist-500);
--text-subtle: var(--color-mist-400);
--text-on-inverse: var(--color-cream-50);
--text-on-brand: var(--color-cream-50);
--text-link: var(--color-navy-600);
--text-link-hover: var(--color-gold-500);
--text-gold: var(--color-gold-600);
/* Borders & dividers */
--border-subtle: var(--color-cream-200);
--border-default: var(--color-mist-200);
--border-strong: var(--color-bark-300);
--border-focus: var(--color-gold-400);
--border-inverse: var(--color-navy-500);
/* Interactive */
--interactive-primary: var(--color-navy-600);
--interactive-primary-hover: var(--color-navy-700);
--interactive-primary-active: var(--color-navy-800);
--interactive-secondary: var(--color-gold-400);
--interactive-secondary-hover: var(--color-gold-500);
--interactive-secondary-active:var(--color-gold-600);
/* Backgrounds for sections */
--section-bg-default: var(--surface-page);
--section-bg-alt: var(--color-cream-100);
--section-bg-dark: var(--color-navy-600);
--section-bg-gold: var(--color-gold-50);
/* ----------------------------------------------------------------------------
2. TYPOGRAPHY
---------------------------------------------------------------------------- */
/* ---------- Type families ----------
Fraunces (variable, Google Fonts) — humanist serif with editorial soul,
used for H1–H3 and display. Loaded via in the page with
the 9..144 optical size and 100..900 weight axes enabled.
Figtree (variable, Google Fonts) — humanist sans-serif, warm and readable,
used for body, UI, H4–H6, buttons. Weights 300..900.
System mono fallback — used for code/log samples, very rare on this site.
-------------------------------------- */
--font-serif: "Fraunces", Georgia, "Times New Roman", serif;
--font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco,
"Cascadia Mono", "Liberation Mono", Consolas, monospace;
--font-heading: var(--font-serif);
--font-body: var(--font-sans);
--font-ui: var(--font-sans);
/* ---------- Type scale (modular, 1.25 ratio — "major third") ----------
Used with Fraunces for headings, Figtree for body/UI.
Mobile-first sizes; larger sizes scale up via clamp() for fluid type.
----------------------------------------------------------------------- */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px — body default */
--text-lg: 1.125rem; /* 18px — body large */
--text-xl: 1.25rem; /* 20px — subheads */
--text-2xl: 1.5rem; /* 24px — H4 */
--text-3xl: 1.875rem; /* 30px — H3 */
--text-4xl: 2.25rem; /* 36px — H2 */
--text-5xl: 3rem; /* 48px — H1 mobile */
--text-6xl: 3.75rem; /* 60px — H1 desktop */
--text-7xl: 4.5rem; /* 72px — hero display */
--text-8xl: 6rem; /* 96px — oversized editorial display */
/* Fluid hero display — clamps between mobile and desktop */
--text-hero: clamp(2.5rem, 2rem + 3.5vw, 5rem);
--text-page-title: clamp(2rem, 1.6rem + 2vw, 3.5rem);
--text-section-title: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
/* ---------- Line heights ---------- */
--leading-none: 1;
--leading-tight: 1.1; /* hero display */
--leading-snug: 1.25; /* headings */
--leading-normal: 1.5; /* body default */
--leading-relaxed: 1.65; /* long-form reading */
--leading-loose: 1.85; /* pull quotes, airy blocks */
/* ---------- Letter spacing (tracking) ---------- */
/* Fraunces handles its own spacing gracefully; tracking mostly applied
to uppercase UI labels and all-caps eyebrows. */
--tracking-tighter: -0.03em;
--tracking-tight: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.12em; /* all-caps eyebrows */
/* ---------- Font weights ---------- */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 900; /* reserved for display hero */
/* ---------- Fraunces optical size ----------
Fraunces has an "opsz" variable axis. Set per size for best rendering:
- Small (UI, captions): opsz 9
- Body: opsz 14
- Subheads: opsz 24
- Headlines: opsz 60
- Display: opsz 144
Components opt in via font-variation-settings when using Fraunces. */
--fraunces-opsz-ui: 9;
--fraunces-opsz-body: 14;
--fraunces-opsz-subhead: 24;
--fraunces-opsz-headline: 60;
--fraunces-opsz-display: 144;
/* Subtle "SOFT" axis: 0 = sharp, 100 = soft. Use 30 for warm editorial feel */
--fraunces-soft: 30;
/* ----------------------------------------------------------------------------
3. SPACING (4px base, modular)
---------------------------------------------------------------------------- */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem; /* 2px — hairlines */
--space-1: 0.25rem; /* 4px */
--space-1-5: 0.375rem; /* 6px */
--space-2: 0.5rem; /* 8px */
--space-2-5: 0.625rem; /* 10px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-7: 1.75rem; /* 28px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-14: 3.5rem; /* 56px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
--space-40: 10rem; /* 160px */
--space-48: 12rem; /* 192px */
/* Semantic spacing aliases */
--section-py-sm: var(--space-12); /* compact section padding */
--section-py-md: var(--space-20); /* standard section padding */
--section-py-lg: var(--space-24); /* feature section padding */
--section-py-xl: var(--space-32); /* hero section padding */
--gutter-sm: var(--space-4); /* mobile gutter */
--gutter-md: var(--space-6); /* tablet gutter */
--gutter-lg: var(--space-8); /* desktop gutter */
--stack-tight: var(--space-2); /* tight vertical rhythm */
--stack-default: var(--space-4);
--stack-loose: var(--space-6);
--stack-section: var(--space-10);
/* ----------------------------------------------------------------------------
4. LAYOUT — containers, breakpoints, z-index
---------------------------------------------------------------------------- */
/* Max content widths — content should never touch full edge on desktop */
--container-xs: 20rem; /* 320px — narrow prose */
--container-sm: 40rem; /* 640px — article body */
--container-md: 48rem; /* 768px — comfortable reading */
--container-lg: 64rem; /* 1024px — dense layout */
--container-xl: 80rem; /* 1280px — default page container */
--container-2xl: 90rem; /* 1440px — wide hero with side content */
--container-max: 96rem; /* 1536px — full-bleed upper bound */
/* Breakpoints (for documentation/reference — used in media queries) */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
/* Z-index scale — explicit layering prevents the 9999 arms race */
--z-base: 1;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 500;
--z-banner: 700;
--z-overlay: 1000;
--z-modal: 1100;
--z-popover: 1200;
--z-tooltip: 1300;
--z-toast: 1400;
--z-skip-link: 1500; /* accessibility skip link always on top */
/* ----------------------------------------------------------------------------
5. BORDERS & RADII
---------------------------------------------------------------------------- */
--border-width-0: 0;
--border-width-1: 1px;
--border-width-2: 2px;
--border-width-4: 4px;
--border-width-8: 8px;
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-2xl: 32px;
--radius-3xl: 48px;
--radius-full: 9999px;
/* Semantic radius aliases */
--radius-input: var(--radius-md);
--radius-button: var(--radius-full); /* pill buttons on the hero */
--radius-card: var(--radius-lg);
--radius-image: var(--radius-lg);
--radius-modal: var(--radius-xl);
--radius-badge: var(--radius-full);
/* ----------------------------------------------------------------------------
6. SHADOWS — warm, not neutral
---------------------------------------------------------------------------- */
/* Shadows use a dark navy/bark tint instead of pure black, so elevation
on cream backgrounds reads warm rather than cold. All shadows defined
with the "x y blur spread color" model, stacked for depth. */
--shadow-xs: 0 1px 2px 0 rgba(58, 47, 38, 0.06);
--shadow-sm: 0 1px 2px 0 rgba(58, 47, 38, 0.06),
0 1px 3px 0 rgba(58, 47, 38, 0.08);
--shadow-md: 0 2px 4px -1px rgba(58, 47, 38, 0.06),
0 4px 8px -2px rgba(58, 47, 38, 0.08);
--shadow-lg: 0 4px 6px -2px rgba(58, 47, 38, 0.05),
0 12px 24px -4px rgba(58, 47, 38, 0.12);
--shadow-xl: 0 8px 12px -4px rgba(58, 47, 38, 0.05),
0 24px 48px -8px rgba(31, 50, 86, 0.18);
--shadow-2xl: 0 16px 32px -8px rgba(31, 50, 86, 0.10),
0 40px 72px -12px rgba(31, 50, 86, 0.22);
/* Inner shadows (for pressed states, inset panels) */
--shadow-inner-sm: inset 0 1px 2px 0 rgba(58, 47, 38, 0.08);
--shadow-inner-md: inset 0 2px 4px 0 rgba(58, 47, 38, 0.10);
/* Focus ring — accessible, brand-aware, never removed */
--shadow-focus: 0 0 0 3px rgba(200, 148, 45, 0.45);
--shadow-focus-inverse: 0 0 0 3px rgba(252, 250, 245, 0.7);
/* ----------------------------------------------------------------------------
7. MOTION — easings and durations
---------------------------------------------------------------------------- */
/* Durations */
--duration-instant: 50ms;
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
--duration-slower: 600ms;
--duration-slowest: 900ms;
/* Easings */
--ease-linear: linear;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.2, 0.8, 0.4, 1.2);
--ease-subtle: cubic-bezier(0.25, 0.1, 0.25, 1);
/* Common transition patterns */
--transition-colors: color var(--duration-normal) var(--ease-out),
background-color var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
fill var(--duration-normal) var(--ease-out),
stroke var(--duration-normal) var(--ease-out);
--transition-transform: transform var(--duration-normal) var(--ease-out);
--transition-opacity: opacity var(--duration-normal) var(--ease-out);
--transition-all: all var(--duration-normal) var(--ease-out);
/* ----------------------------------------------------------------------------
8. COMPONENT TOKENS — Button variants
----------------------------------------------------------------------------
Three variants (primary, secondary, ghost) × four sizes (sm, md, lg, xl).
These tokens are consumed by .btn components defined in components.css
(Phase 1 Task 1.3 / Phase 2 build).
---------------------------------------------------------------------------- */
/* Button sizing */
--btn-height-sm: 2rem; /* 32px */
--btn-height-md: 2.75rem; /* 44px — accessible tap target */
--btn-height-lg: 3.25rem; /* 52px */
--btn-height-xl: 3.75rem; /* 60px — hero CTA */
--btn-padding-x-sm: var(--space-3);
--btn-padding-x-md: var(--space-6);
--btn-padding-x-lg: var(--space-8);
--btn-padding-x-xl: var(--space-10);
--btn-font-size-sm: var(--text-sm);
--btn-font-size-md: var(--text-base);
--btn-font-size-lg: var(--text-lg);
--btn-font-size-xl: var(--text-xl);
--btn-font-weight: var(--weight-semibold);
--btn-letter-spacing: var(--tracking-wide);
--btn-radius: var(--radius-button);
--btn-transition: var(--transition-colors),
var(--transition-transform),
box-shadow var(--duration-normal) var(--ease-out);
/* Primary — navy fill, cream text. The authoritative CTA. */
--btn-primary-bg: var(--interactive-primary);
--btn-primary-bg-hover: var(--interactive-primary-hover);
--btn-primary-bg-active: var(--interactive-primary-active);
--btn-primary-text: var(--text-on-brand);
--btn-primary-border: transparent;
--btn-primary-shadow: var(--shadow-md);
--btn-primary-shadow-hover: var(--shadow-lg);
/* Secondary — gold outline, navy text. Warm, approachable secondary. */
--btn-secondary-bg: transparent;
--btn-secondary-bg-hover: var(--color-gold-50);
--btn-secondary-bg-active: var(--color-gold-100);
--btn-secondary-text: var(--color-navy-700);
--btn-secondary-border: var(--color-gold-400);
--btn-secondary-border-hover: var(--color-gold-500);
--btn-secondary-shadow: none;
/* Gold — filled gold, navy text. Celebration CTA (awards, offers). */
--btn-gold-bg: var(--color-gold-400);
--btn-gold-bg-hover: var(--color-gold-500);
--btn-gold-bg-active: var(--color-gold-600);
--btn-gold-text: var(--color-navy-900);
--btn-gold-border: transparent;
--btn-gold-shadow: var(--shadow-md);
--btn-gold-shadow-hover: var(--shadow-lg);
/* Ghost — text-only, underline on hover. Tertiary actions. */
--btn-ghost-bg: transparent;
--btn-ghost-bg-hover: var(--color-cream-100);
--btn-ghost-text: var(--color-navy-700);
--btn-ghost-border: transparent;
--btn-ghost-shadow: none;
/* Inverse (on dark backgrounds) — cream text, transparent bg, cream border */
--btn-inverse-bg: transparent;
--btn-inverse-bg-hover: rgba(252, 250, 245, 0.1);
--btn-inverse-text: var(--color-cream-50);
--btn-inverse-border: var(--color-cream-50);
--btn-inverse-shadow: none;
/* ----------------------------------------------------------------------------
9. COMPONENT TOKENS — Form elements
----------------------------------------------------------------------------
iOS requires min 16px font size on inputs to prevent auto-zoom.
Touch targets must be >= 44px per WCAG 2.5.5.
---------------------------------------------------------------------------- */
/* Input sizing */
--input-height-sm: 2.25rem; /* 36px */
--input-height-md: 2.75rem; /* 44px — default, accessible */
--input-height-lg: 3.25rem; /* 52px — hero lead capture */
--input-padding-x: var(--space-4);
--input-padding-y: var(--space-3);
--input-font-size: var(--text-base); /* 16px — prevents iOS zoom */
--input-font-family: var(--font-body);
--input-font-weight: var(--weight-regular);
--input-line-height: var(--leading-normal);
/* Input appearance */
--input-bg: var(--color-cream-50);
--input-bg-hover: var(--color-cream-100);
--input-bg-focus: #FFFFFF;
--input-bg-disabled: var(--color-mist-100);
--input-text: var(--text-default);
--input-text-placeholder:var(--text-subtle);
--input-text-disabled: var(--text-muted);
--input-border: var(--border-default);
--input-border-hover: var(--color-bark-300);
--input-border-focus: var(--color-navy-500);
--input-border-error: var(--color-error);
--input-border-success: var(--color-success);
--input-radius: var(--radius-input);
--input-shadow: var(--shadow-xs);
--input-shadow-focus: var(--shadow-focus);
--input-transition: var(--transition-colors),
box-shadow var(--duration-normal) var(--ease-out);
/* Labels */
--label-font-size: var(--text-sm);
--label-font-weight: var(--weight-semibold);
--label-color: var(--text-strong);
--label-margin-bottom: var(--space-2);
/* Helper text */
--helper-font-size: var(--text-sm);
--helper-color: var(--text-muted);
--helper-margin-top: var(--space-2);
/* Error text */
--error-font-size: var(--text-sm);
--error-color: var(--color-error);
--error-margin-top: var(--space-2);
/* ----------------------------------------------------------------------------
10. COMPONENT TOKENS — Cards
---------------------------------------------------------------------------- */
--card-bg: var(--surface-card);
--card-bg-elevated: var(--surface-elevated);
--card-border: var(--border-subtle);
--card-border-hover: var(--color-gold-300);
--card-radius: var(--radius-card);
--card-padding-sm: var(--space-4);
--card-padding-md: var(--space-6);
--card-padding-lg: var(--space-8);
--card-shadow: var(--shadow-sm);
--card-shadow-hover: var(--shadow-lg);
--card-transition: box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
/* ----------------------------------------------------------------------------
11. ACCESSIBILITY
---------------------------------------------------------------------------- */
/* Minimum tap target per WCAG 2.5.5 */
--tap-target-min: 44px;
/* Focus ring — never remove this, override via :focus-visible instead */
--focus-ring: var(--shadow-focus);
--focus-ring-offset: 2px;
/* Motion-safe fallbacks — components should respect prefers-reduced-motion */
--motion-safe-transition: var(--transition-all);
}
/* ----------------------------------------------------------------------------
12. REDUCED MOTION
----------------------------------------------------------------------------
Respect user OS preference. Durations collapse to near-zero; animations
still fire but without perceptible delay.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-instant: 0ms;
--duration-fast: 0ms;
--duration-normal: 0ms;
--duration-slow: 0ms;
--duration-slower: 0ms;
--duration-slowest: 0ms;
}
}
/* ----------------------------------------------------------------------------
13. BASE HTML HOOKS
----------------------------------------------------------------------------
Minimal resets + global element defaults that pair with the tokens above.
Component CSS in Phase 1 Task 1.3 / Phase 2 build consumes these variables.
---------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 16px; /* anchor rem scale */
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
}
body {
margin: 0;
background-color: var(--surface-page);
color: var(--text-default);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--font-heading);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--text-strong);
letter-spacing: var(--tracking-tight);
}
h1 {
font-size: var(--text-page-title);
line-height: var(--leading-tight);
font-weight: var(--weight-bold);
font-variation-settings: "opsz" 60, "SOFT" 30;
}
h2 {
font-size: var(--text-section-title);
font-weight: var(--weight-semibold);
font-variation-settings: "opsz" 48, "SOFT" 30;
}
h3 {
font-size: var(--text-3xl);
font-variation-settings: "opsz" 30, "SOFT" 30;
}
h4 {
font-size: var(--text-2xl);
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-normal);
}
h5 {
font-size: var(--text-xl);
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
}
h6 {
font-size: var(--text-lg);
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
}
p {
margin: 0;
line-height: var(--leading-relaxed);
color: var(--text-default);
}
a {
color: var(--text-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: var(--transition-colors);
}
a:hover {
color: var(--text-link-hover);
text-decoration-thickness: 2px;
}
a:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}
img, picture, video, svg {
display: block;
max-width: 100%;
height: auto;
}
button {
font-family: inherit;
font-size: inherit;
cursor: pointer;
}
/* Selection styling — gold on navy for a delightful touch */
::selection {
background-color: var(--color-gold-200);
color: var(--color-navy-900);
}
/* Skip link (a11y) */
.skip-to-content {
position: absolute;
top: -100px;
left: var(--space-4);
z-index: var(--z-skip-link);
padding: var(--space-3) var(--space-5);
background-color: var(--color-navy-700);
color: var(--color-cream-50);
border-radius: var(--radius-md);
text-decoration: none;
font-weight: var(--weight-semibold);
transition: top var(--duration-fast) var(--ease-out);
}
.skip-to-content:focus {
top: var(--space-4);
}
/* ----------------------------------------------------------------------------
14. FONT LOADING
----------------------------------------------------------------------------
Self-hosted fonts will be added in Phase 2 build. For Phase 1 reference
and local dev prototypes, use the following @import from Google Fonts:
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Figtree:wght@300..900&display=swap');
Or, preferred, + in :
Production (Phase 2): self-host both variable fonts, subset to Latin,
serve via Firebase Hosting with long-lived cache headers. Preload the
display face to avoid layout shift on hero render.
---------------------------------------------------------------------------- */