/* ============================================
   CSS VARIABLES
   Portfolio 2026 - Loesing Design Incorporated
   ============================================ */

:root {
    /* Typography Scale - Major Third (1.25 ratio) */
    --type-xs: 14px;      /* Mobile H6 */
    --type-sm: 15px;      /* Tablet H6 */
    --type-base: 16px;    /* H5, H6, base text */
    --type-md: 20px;      /* Lists, mobile header */
    --type-lg: 25px;      /* Desktop header text */
    --type-xl: 26px;      /* Mobile body text */
    --type-2xl: 32px;     /* Tablet page subtitle */
    --type-3xl: 40px;     /* Desktop page subtitle */
    --type-4xl: 49px;     /* Mobile case study titles */
    --type-hero-mobile: 18vw;  /* Hero heading (Hi, I'm, Chet) */
    
    /* Line Heights (8px grid) */
    --line-xs: 18px;
    --line-sm: 24px;
    --line-md: 32px;
    --line-lg: 38px;
    --line-xl: 40px;
    --line-2xl: 56px;
    
    /* Font Families */
    --font-heading: 'Syne', sans-serif;
    --font-subheading: 'Epilogue', sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Spacing Scale (8px grid) */
    --space-0: 0;
    --space-xs: 8px;      /* Tiny gaps, subtle spacing */
    --space-sm: 16px;     /* List spacing, small gaps */
    --space-md: 24px;     /* Section margins, paragraph spacing */
    --space-lg: 32px;     /* Medium gaps, mobile containers */
    --space-xl: 40px;     /* Column gaps, section spacing */
    --space-2xl: 48px;    /* Mobile section padding */
    --space-3xl: 52px;    /* Mobile About/Photo padding */
    --space-4xl: 56px;
    --space-5xl: 64px;    /* Large section gaps */
    --space-6xl: 80px;    /* Desktop section padding */
    --space-7xl: 96px;    /* About/How section desktop padding */
    --space-8xl: 104px;
    --space-9xl: 120px;
    --space-10xl: 140px;  /* Photo grid right padding */
    
    /* Colors */
    --color-accent: #FF6B7A;
    --color-light-purple: #E5DEFF;
    --color-white: #FFFFFF;
    --color-dark: #1A1A1A;
    --color-gray: #666666;
    --color-tan: burlywood;
    
    /* Gradients */
    --gradient-about: linear-gradient(135deg, #F5EFE0 0%, #EBE3D0 100%);
    
    /* Shadows */
    --shadow-hard: 12px 12px 0 0 var(--color-white);
    
    /* Opacity */
    --opacity-text: 0.85;
    --opacity-label: 0.7;
    --opacity-photo: 0.9;
    
    /* Touch Targets */
    --touch-target-min: 44px;
}