/**
 * CSS Variables - Structure Only
 * 
 * This file contains structural variables only (spacing, typography, etc.)
 * Color variables are defined in child theme's theme.css
 * or theme-default.css as fallback.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    /* =========================================================================
     * SPACING
     * ========================================================================= */
    --vr-spacing-xs: 4px;
    --vr-spacing-sm: 8px;
    --vr-spacing-md: 16px;
    --vr-spacing-lg: 24px;
    --vr-spacing-xl: 32px;
    --vr-spacing-2xl: 48px;
    
    /* =========================================================================
     * BORDER RADIUS
     * ========================================================================= */
    --vr-radius-sm: 4px;
    --vr-radius-md: 8px;
    --vr-radius-lg: 12px;
    --vr-radius-xl: 12px;
    --vr-radius-full: 12px;
    --vr-radius-pill: 9999px;
    
    /* =========================================================================
     * TYPOGRAPHY
     * ========================================================================= */
    --vr-font-headline: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --vr-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --vr-font-family: var(--vr-font-body);
    
    /* Font Sizes */
    --vr-font-size-xs: 10px;
    --vr-font-size-sm: 12px;
    --vr-font-size-md: 14px;
    --vr-font-size-lg: 16px;
    --vr-font-size-xl: 20px;
    --vr-font-size-2xl: 24px;
    --vr-font-size-3xl: 32px;
    
    /* Font Weights */
    --vr-font-normal: 400;
    --vr-font-medium: 500;
    --vr-font-semibold: 600;
    --vr-font-bold: 700;
    --vr-font-black: 800;
    
    /* Letter Spacing */
    --vr-tracking-tight: -0.02em;
    --vr-tracking-normal: 0;
    --vr-tracking-wide: 0.1em;
    --vr-tracking-wider: 0.2em;
    
    /* Line Heights */
    --vr-leading-tight: 1.2;
    --vr-leading-normal: 1.5;
    --vr-leading-relaxed: 1.75;
    
    /* =========================================================================
     * TRANSITIONS
     * ========================================================================= */
    --vr-transition-fast: 150ms ease;
    --vr-transition-normal: 250ms ease;
    --vr-transition-slow: 350ms ease;
    
    /* =========================================================================
     * Z-INDEX SCALE
     * ========================================================================= */
    --vr-z-base: 1;
    --vr-z-dropdown: 100;
    --vr-z-sticky: 200;
    --vr-z-fixed: 300;
    --vr-z-modal-backdrop: 400;
    --vr-z-modal: 500;
    --vr-z-toast: 600;
    
    /* =========================================================================
     * SAFE AREAS (iOS notch, etc.)
     * ========================================================================= */
    --vr-safe-area-top: env(safe-area-inset-top, 0px);
    --vr-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --vr-safe-area-left: env(safe-area-inset-left, 0px);
    --vr-safe-area-right: env(safe-area-inset-right, 0px);
    
    /* =========================================================================
     * LAYOUT
     * ========================================================================= */
    --vr-header-height: 64px;
    --vr-bottom-nav-height: 80px;
    --vr-max-width: 640px;
}

/* Base typography */
body {
    font-family: var(--vr-font-body);
    background-color: var(--vr-background);
    color: var(--vr-text);
}

/* Headline typography class */
.vr-headline {
    font-family: var(--vr-font-headline);
    font-weight: var(--vr-font-bold);
    letter-spacing: var(--vr-tracking-tight);
    line-height: var(--vr-leading-tight);
}

/* Label typography class */
.vr-label {
    font-family: var(--vr-font-body);
    font-weight: var(--vr-font-bold);
    font-size: var(--vr-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--vr-tracking-wider);
}