/**
 * PAW CUSTOM - Design System V3 Tokens (Mobile First)
 * Based on Brand Foundation Plan P1
 */
:root {
    /* 1. Core Color Palette */
    --color-ink: #111111;
    --color-paper: #F5F3EF;
    --color-pure-white: #FFFFFF;
    --color-muted-grey: #8A8A86;
    --color-border: #DEDDD8;
    --color-paw-red: #D9271C;

    /* Legacy mapping for safety during transition */
    --color-primary: var(--color-paw-red);
    --color-primary-dark: #b92017;
    --color-primary-hover: #b92017;
    --color-text: var(--color-ink);
    --color-muted: var(--color-muted-grey);
    --color-surface: var(--color-pure-white);
    --color-surface-soft: var(--color-paper);
    --color-surface-muted: var(--color-paper);

    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --text-color: var(--color-text);
    --text-muted: var(--color-muted);
    --text-dark: var(--color-ink);
    --border-color: var(--color-border);
    --dark-grey: var(--color-surface);
    --light-grey: var(--color-paper);
    --storefront-bg: var(--color-pure-white);
    --storefront-glow: none;

    /* 2. Spacing System */
    --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: 96px;
    --space-10: 128px;

    /* 3. Border Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-full: 999px;

    /* 4. Typography Scale */
    --font-sans: 'Inter', sans-serif;
    --font-heading: 'Inter Tight', 'Inter', sans-serif;
    
    --text-micro: 0.75rem; /* 12px */
    --text-caption: 0.75rem; /* 12px */
    --text-small: 0.875rem; /* 14px */
    --text-body: 1rem;     /* 16px */
    --text-h3: 1.25rem;    /* 20px */
    --text-h2: 1.5rem;     /* 24px */
    --text-h1: 2.375rem;   /* 38px (mobile) */
    --text-section: 1.75rem; /* 28px (mobile) */
    --text-hero-eyebrow: 0.75rem;
    --text-hero-title: clamp(2rem, 5vw, 2.5rem);
    
    --shadow-sm: 0 1px 2px rgba(17,17,17,0.05);
    --shadow-md: 0 4px 6px rgba(17,17,17,0.05);
    --shadow-lg: 0 10px 15px rgba(17,17,17,0.05);

    /* 5. Header, Navigation & Touch Target Tokens */
    --touch-min: 44px;
    --header-announcement-h: 30px;
    --header-mobile-h: 54px;
    --header-mobile-height: calc(var(--header-announcement-h) + var(--header-mobile-h)); /* 84px */
    --header-mobile-total-h: var(--header-mobile-height);
    --mobile-header-h: var(--header-mobile-height);
    --header-desktop-h: 96px;
    --bottom-nav-h: 56px;
    --sticky-bar-h: 64px;
    --content-pad-extra: 24px;
    --color-accent: var(--color-primary);
    --header-actual-h: var(--header-mobile-height);
    --float-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 16px);

    /* 6. Z-Index Layering Scale */
    --z-negative: -1;
    --z-base: 1;
    --z-sticky-cta: 80;
    --z-bottom-nav: 90;
    --z-float: 95;
    --z-header: 1000;
    --z-drawer: 1100;
    --z-modal: 1200;
    --z-toast: 1300;

    /* Layout Constraints */
    --layout-max-width: 1440px;
    --content-max-width: 1360px;
}

@media (min-width: 768px) {
    :root {
        --text-h1: 4rem; /* 64px (desktop) */
        --text-section: 2.5rem; /* 40px (desktop) */
        --text-h2: 2rem;
        --text-h3: 1.5rem;
    }
}