/**
 * tokens.css — The Calm Curator Design Tokens
 * Auto-generated by build-tokens.js — DO NOT edit directly.
 * Edit tokens.json and re-run: node build-tokens.js
 *
 * Generated: Apr 13, 2026, 11:45 PM
 */

:root {
    /* ── COLOR ── */
    /* The full palette. Blush and petal are the primary brand pinks. Butter is the warm gold-cream accent. Cream and warm-white are the background tones. */
    --color-blush-light: #fdf0f2;  /* Palest blush — used for hero background and light section washes */
    --color-blush-base: #f2c4c8;  /* Main brand pink — nav CTA button, card hovers, hero gradients */
    --color-blush-dark: #d4949a;  /* Deeper blush — accent lines, icon color, label dashes, borders on hover */
    --color-blossom-base: #e0a1a8;  /* Mid-tone rose — used sparingly as a secondary accent */
    --color-petal-base: #f7d6d9;  /* Soft pink — quote banner background base, image accent shape */
    --color-butter-light: #fef6e4;  /* Palest butter — area tags, hero gradient */
    --color-butter-medium: #f8e8c0;  /* Warm butter — quote banner gradient, approach blob, service icon backgrounds */
    --color-butter-dark: #e6c97a;  /* Deep butter/gold — available for future use as a warm gold highlight */
    --color-gold-base: #d4a84b;  /* Rich gold — available for premium accents, not currently used prominently */
    --color-gold-light: #f5e6c4;  /* Pale gold wash — available for future section tints */
    --color-gold-soft: #c9994a;  /* Warm gold — available for warm-toned call-to-actions */
    --color-surface-cream: #fffdf9;  /* Off-white with warmth — About, Services, Approach, Contact section backgrounds */
    --color-surface-warm-white: #fffefb;  /* Warmest white — page body background, form field backgrounds */
    --color-text-primary: #2e2a2b;  /* Near-black with warmth — all headings and body text */
    --color-text-secondary: #5c5456;  /* Warm mid-gray — body copy, paragraph text, sub-descriptions */
    --color-text-muted: #9a8e90;  /* Quiet gray — form labels, secondary metadata */
    --color-footer-bg-from: #3a3234;  /* Footer background gradient start — dark warm charcoal */
    --color-footer-bg-to: #2e2729;  /* Footer background gradient end — deepest warm dark */
    /* ── TYPOGRAPHY ── */
    /* Three font families are in use. Display is for headings. Italic is for accent words inside headings (the italic serif). Body is for all UI text, labels, and paragraphs. */
    --typography-family-display: 'Playfair Display', Georgia, serif;  /* Heading font — used for all h1–h4 and the logo wordmark */
    --typography-family-italic: 'Cormorant Garamond', Georgia, serif;  /* Accent italic font — used inside headings for the cursive emphasis word (e.g. 'The Calm Curator') */
    --typography-family-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;  /* Body and UI font — paragraphs, nav links, buttons, labels, tags */
    --typography-size-xs: 0.72rem;  /* 10–11px — section labels, form labels, nav links */
    --typography-size-sm: 0.85rem;  /* ~13px — area tags, footer small text */
    --typography-size-base: 0.95rem;  /* ~15px — body copy, card paragraphs */
    --typography-size-md: 1rem;  /* 16px — standard body text, intro paragraphs */
    --typography-size-lg: 1.15rem;  /* ~18px — hero subtitle */
    --typography-size-xl: 1.35rem;  /* ~22px — nav logo */
    --typography-size-2xl: 1.9rem;  /* ~30px — footer logo */
    --typography-size-h3: 1.3rem;  /* ~21px — service and approach card headings */
    --typography-size-h2: clamp(2rem, 4vw, 2.8rem);  /* Section headings — fluid between 32px and 45px */
    --typography-size-h1: clamp(3rem, 8.5vw, 6rem);  /* Hero headline — fluid between 48px and 96px */
    --typography-weight-light: 300;  /* Light — hero subtitle, form inputs */
    --typography-weight-regular: 400;  /* Regular — body paragraphs, italic accent font */
    --typography-weight-medium: 500;  /* Medium — headings, nav logo, footer logo */
    --typography-weight-semibold: 600;  /* Semibold — buttons, nav links, section labels, form labels */
    --typography-leading-tight: 1.05;  /* Hero h1 */
    --typography-leading-snug: 1.15;  /* Section headings */
    --typography-leading-normal: 1.70;  /* Service and approach card body text */
    --typography-leading-relaxed: 1.75;  /* Page body default */
    --typography-leading-loose: 1.85;  /* About section body text */
    --typography-tracking-tight: -0.02em;  /* Hero h1 — slightly tighter for large display type */
    --typography-tracking-normal: 0.01em;  /* General headings and logo */
    --typography-tracking-label: 0.25em;  /* Section labels (uppercase small caps feel) */
    --typography-tracking-button: 0.15em;  /* Button text */
    --typography-tracking-nav: 0.12em;  /* Nav links */
    --typography-tracking-wide: 0.35em;  /* Hero tagline — maximum tracking for airiness */
    /* ── SPACING ── */
    /* Section padding and layout gaps. Adjust these to breathe the layout in or out globally. */
    --spacing-section-y: 8rem;  /* Top/bottom padding on all main sections — increase for more air, decrease to tighten */
    --spacing-section-y-mobile: 5rem;  /* Section padding on mobile viewports */
    --spacing-container-max: 1180px;  /* Maximum content width — the layout column */
    --spacing-container-px: 2rem;  /* Horizontal padding inside the container on all screen sizes */
    --spacing-grid-gap-lg: 5rem;  /* Gap in the two-column about and contact grids */
    --spacing-grid-gap-cards: 1.5rem;  /* Gap between service and approach cards */
    --spacing-card-pad-x: 2rem;  /* Horizontal padding inside cards */
    --spacing-card-pad-y: 2.5rem;  /* Vertical padding inside cards */
    --spacing-section-header-mb: 4rem;  /* Margin below section headers before the grid content */
    /* ── SHAPE ── */
    /* Border radii control how round vs. sharp elements feel. Increase all three to go softer; decrease for a more editorial edge. */
    --shape-radius-sm: 8px;  /* Small — form inputs, subtle container rounding */
    --shape-radius-md: 14px;  /* Medium — approach cards, nav mobile menu */
    --shape-radius-lg: 24px;  /* Large — service cards, about image frame, contact form card */
    --shape-radius-pill: 50px;  /* Pill — buttons, nav CTA, area tags */
    /* ── SHADOW ── */
    /* Shadows use warm-tinted values (slight rose/brown tint) rather than pure gray to stay on-palette. */
    --shadow-soft: 0 10px 30px -12px rgba(90, 55, 60, 0.10);  /* Subtle lift — approach cards on hover */
    --shadow-hover: 0 22px 50px -20px rgba(90, 55, 60, 0.18);  /* Elevated hover — service cards on hover */
    --shadow-card: 0 2px 10px rgba(90, 55, 60, 0.04), 0 18px 40px -18px rgba(90, 55, 60, 0.12);  /* Resting depth — about image, contact form card */
    --shadow-btn-primary: 0 6px 20px -8px rgba(46, 42, 43, 0.30);  /* Button shadow for primary (dark) button at rest */
    --shadow-btn-primary-hover: 0 10px 28px -8px rgba(212, 148, 154, 0.50);  /* Button shadow for primary button on hover — switches to blush-tinted glow */
    /* ── MOTION ── */
    /* Transition timings. 'fast' is for simple color/opacity changes. 'slow' is for transforms and reveals. */
    --motion-fast: 0.3s ease;  /* Color changes, border highlights, opacity tweaks */
    --motion-slow: 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);  /* Transforms — card lifts, icon rotations, scroll reveals */
    --motion-reveal: 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);  /* Fade-in scroll reveal duration */
    /* ── NAV ── */
    --nav-height: 76px;  /* Desktop nav bar height — also used as scroll-padding-top offset */
    --nav-height-mobile: 68px;  /* Mobile nav bar height */
}