:root {
    /* ==========================================================================
       Color System - Packaging Innovation (Pelican)
       ========================================================================== */
    --color-primary: #1D4ED8; /* Packaging blue */
    --color-primary-strong: #1E3A8A;
    --color-primary-light: #3B82F6;
    --color-eco: #059669; /* Sustainability green */
    --color-eco-soft: #D1FAE5;
    --color-teal: #0891B2; /* Food safety freshness */
    --color-ink: #0F172A;
    --color-muted: #475569;
    --color-subtle: #64748B;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F8FAFC;
    --color-border: #E2E8F0;
    --color-border-strong: #CBD5E1;
    --color-highlight: #DBEAFE;
    --color-warning: #F97316;
    --color-success: #16A34A;
    
    /* ==========================================================================
       Typography
       ========================================================================== */
    --font-family-heading: 'Poppins', 'Segoe UI', 'Inter', system-ui, sans-serif;
    --font-family-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
    
    --font-size-base: 1rem; /* 16px */
    --font-size-h1: 3rem;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
    --font-size-small: 0.95rem;
    
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ==========================================================================
       Spacing & Layout
       ========================================================================== */
    --spacing-unit: 1rem;
    --spacing-2xs: calc(0.25 * var(--spacing-unit)); /* 4px */
    --spacing-xs: calc(0.5 * var(--spacing-unit)); /* 8px */
    --spacing-sm: calc(0.75 * var(--spacing-unit)); /* 12px */
    --spacing-md: calc(1 * var(--spacing-unit)); /* 16px */
    --spacing-lg: calc(1.5 * var(--spacing-unit)); /* 24px */
    --spacing-xl: calc(2.5 * var(--spacing-unit)); /* 40px */
    --spacing-2xl: calc(3.5 * var(--spacing-unit)); /* 56px */
    --spacing-3xl: calc(5 * var(--spacing-unit)); /* 80px */
    
    --max-width: 1220px;
    --content-width: 1040px;
    --header-height: 76px;
    
    /* ==========================================================================
       Borders, Radius, and Shadow
       ========================================================================== */
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 14px;
    
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
    --shadow-inset: inset 0 2px 4px rgba(15, 23, 42, 0.08);
    
    /* ==========================================================================
       Transitions
       ========================================================================== */
    --transition-fast: 150ms ease;
    --transition-base: 220ms ease;
}