:root {
    /* Brand colors */
    --color-primary: #ed1c24;
    --color-primary-dark: #ac161b;
    --color-white: #ffffff;
    --color-cream: #fffbfa;
    --color-pink-soft: #fff5f6;
    --color-pink-mid: #ffe8ec;
    --color-pink-accent: #f5c4cf;
    --color-pink-blush: #fce4ec;
    --color-pink-wash: #fdf0f2;
    --color-surface: #ffffff;

    /* Neutral grey scale (replaces brown-red ink family) */
    --color-grey-950: #1f2021;
    --color-grey-900: #282728;
    --color-grey-800: #323133;
    --color-grey-600: #6e7074;
    --color-grey-400: #a6a8ab;
    --color-grey-200: #d4d5d7;
    --ink-rgb: 40, 39, 40;

    /* Semantic neutrals */
    --color-ink: var(--color-grey-900);
    --color-charcoal: var(--color-grey-900);
    --color-muted: var(--color-grey-600);
    --color-meta: var(--color-grey-400);
    --color-border: var(--color-grey-200);
    --color-surface-dark: var(--color-grey-800);
    --color-surface-darker: var(--color-grey-950);

    /* Typography */
    --font-display: 'Proza Libre', Georgia, serif;
    --font-body: 'Libre Franklin', system-ui, sans-serif;
    --font-heading: var(--font-display);

    --letter-tight: -0.02em;
    --letter-label: 0.08em;
    --line-height-body: 1.65;
    --line-height-display: 1.2;

    /* Fluid type */
    --text-hero: clamp(2rem, 4vw + 0.5rem, 3.5rem);
    --text-h1: clamp(2rem, 3vw + 0.5rem, 3rem);
    --text-h2: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    --text-h3: clamp(1.125rem, 1vw + 0.5rem, 1.5rem);
    --text-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
    --text-small: 0.875rem;
    --text-label: 0.8125rem;

    /* Spacing (8px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --section-gap: clamp(3rem, 6vw, 5rem);
    --container-padding: clamp(1rem, 3vw, 1.5rem);
    --container-max: 1280px;

    /* Effects */
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-card: 0.5rem;
    --radius-pill: 999px;
    --shadow-soft: 0 4px 24px rgba(var(--ink-rgb), 0.08);
    --shadow-card: 0 8px 32px rgba(var(--ink-rgb), 0.12);
    --shadow-hard: 4px 4px 0 var(--color-ink);
    --shadow-boutique: 0 12px 40px rgba(var(--ink-rgb), 0.08);
    --shadow-boutique-hover: 0 20px 48px rgba(237, 28, 36, 0.12);
    --shadow-cta: 0 4px 0 var(--color-ink);
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --transition: 0.25s ease;
    --transition-slow: 0.4s var(--ease-smooth);
    --header-height: 5rem;

    /* Section surfaces */
    --surface-products: var(--color-white);
    --surface-promise: var(--color-cream);
    --surface-newsletter: #f5f5f6;

    /* Section gradients (hero only; lower sections use --surface-*) */
    --gradient-hero-panel: linear-gradient(
        155deg,
        var(--color-pink-soft) 0%,
        var(--color-pink-wash) 38%,
        var(--color-pink-mid) 72%,
        #ffd6de 100%
    );
    --gradient-products: none;
    --gradient-promise: none;
    --gradient-newsletter: none;
    --gradient-footer-glow: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(237, 28, 36, 0.12) 0%, transparent 70%);

    /* Z-index */
    --z-header: 100;
    --z-overlay: 50;
    --z-toast: 200;

    /* Breakpoints (for reference in media queries) */
    /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px */
}