/* ================================
   DESIGN SYSTEM - CSS VARIABLES
   ================================ */
:root {

   /* Your NEW primary gradient - the mesh effect */
    --primary-gradient: 
         radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.9) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.9) 0%, transparent 50%),
         rgba(0, 0, 0, 0.85);
   
   --purple-gradient: 
         radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.9) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.9) 0%, transparent 50%),
         rgba(0, 0, 0, 0.85);

   --orange-gradient: 
         radial-gradient(circle at 25% 75%, rgba(249, 115, 22, 0.9) 0%, transparent 50%),
         radial-gradient(circle at 75% 25%, rgba(234, 88, 12, 0.9) 0%, transparent 50%),
         rgba(0, 0, 0, 0.85);

   --green-gradient: 
         radial-gradient(circle at 25% 75%, rgba(16, 185, 129, 0.9) 0%, transparent 50%),
         radial-gradient(circle at 75% 25%, rgba(5, 150, 105, 0.9) 0%, transparent 50%),
         rgba(0, 0, 0, 0.85);

   --pink-gradient: 
         radial-gradient(circle at 25% 75%, rgba(236, 72, 153, 0.9) 0%, transparent 50%),
         radial-gradient(circle at 75% 25%, rgba(219, 39, 119, 0.9) 0%, transparent 50%),
         rgba(0, 0, 0, 0.85);

   --blue-gradient: 
         radial-gradient(circle at 25% 75%, rgba(59, 130, 246, 0.9) 0%, transparent 50%),
         radial-gradient(circle at 75% 25%, rgba(37, 99, 235, 0.9) 0%, transparent 50%),
         rgba(0, 0, 0, 0.85);

   

   --bg-home-page:
         radial-gradient(circle at 20% 80%, rgba(156, 163, 175, 0.3) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(107, 114, 128, 0.3) 0%, transparent 50%),
         rgba(249, 250, 251, 1);

   

   --nav-height: clamp(50px, 8vh, 81px);  

       /* Keep the old one as "simple" for when you need solid/clear gradient */
    --primary-gradient-simple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          
    /* Light version for backgrounds */
    --primary-gradient-light: 
         radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.9) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.9) 0%, transparent 50%),
         radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
   
   /* Z-Index Scale */
   --z-base: 1;
   --z-overlay: 1000;
   --z-venue-details: 1100;           
   --z-modal-backdrop: 1200;        
   --z-modal-content: 1210;        
   --z-status-modals: 1220;   
   --z-cookie: 1400;   
   --z-navigation: 1800;
   --z-toast: 2000;
   --z-onboarding: 2200;

   /* Classic colours */
   --white: rgba(255, 255, 255, 1);
   --gold: rgba(255,215,0,1);   
   --green: rgba(0,245,0,1);
   --blue: rgba(59,130,246,1);
   --red: rgba(239,68,68,1);
   --purple: rgba(118,75,162,1);
   --orange: rgba(249,115,22,1);

   --dark-gold: rgba(253,187,4,1);
   --dark-green: rgba(0,196,0,1);
   --dark-blue: rgba(37,99,235,1);
   --dark-orange: rgba(234,88,12);
   --dark-grey: rgba(96,96,96,1);

   --light-blue: rgba(102,126,234,1);
   --light-purple: rgba(240,235,245,1);
   --light-orange: rgba(254,215,170,1);
   --light-grey: rgba(156,163,175,1);
   
   --grey-white: rgba(245, 245, 245, 1);
   
   /* Brand Colors & Gradients */
   --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
   --error-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
   --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
   --info-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
   --purple-gradient: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
   
   --currently-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
   
   /* Text Colors */
   --text-primary: rgba(45,55,72,1);
   --text-secondary: rgba(74,85,104,1);
   --text-muted: rgba(113,128,150,1);
   --text-white: rgba(255, 255, 255, 1);
   --text-purple: rgba(118, 75, 162,1);
   
   /* Text Sizing */
   --text-xxs: 0.6rem;
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
   --text-md: 1rem;
   --text-lg: 1.125rem;
   --text-xl: 1.25rem;
   --text-2xl: 1.5rem;
   --text-3xl: 1.875rem;
   --text-4xl: 2.25rem;

   /* Icon Sizing */
   --icon-xs: 1rem;
   --icon-sm: 1.5rem;
   --icon-md: 2rem;
   --icon-lg: 2.5rem;
   --icon-xl: 3rem;
   --icon-2xl: 3.5rem;
   --icon-3xl: 4rem;
   --icon-4xl: 5rem;   
   
   /* Background Colors */
   --bg-white: rgba(255, 255, 255, 0.95);
   --bg-purple: rgba(139, 92, 246, 0.1);
   --bg-orange: rgba(249, 115, 22, 0.1);
   --bg-glass: rgba(255, 255, 255, 0.1);
   --bg-section: rgba(248, 250, 252, 0.8);
   --bg-modal: rgba(0, 0, 0, 0.7);
   --bg-overlay: rgba(0, 0, 0, 0.8);
   --bg-onboarding: rgba(0,0,0,0.9);
   --bg-home: rgba(248, 249, 250, 1);
   --bg-card-home: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 0.8) 100%);
   --bg-recent-finds: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 0.8) 100%);
   
   /* Spacing System */
   --space-xxs: 2px;
   --space-xs: 4px;
   --space-sm: 8px;
   --space-md: 12px;
   --space-lg: 16px;
   --space-xl: 20px;
   --space-2xl: 24px;
   --space-3xl: 32px;
   --space-4xl: 40px;
   
   /* Border Radius */
   --radius-sm: 8px;
   --radius: 12px;
   --radius-lg: 15px;
   --radius-xl: 20px;
   --radius-pill: 25px;
   --radius-circle: 50%;
   
   /* Shadows */
   --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.2);
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
   --shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
   --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.25);
   --shadow-hero-title: 0 2px 4px rgba(0, 0, 0, 0.3);
   --shadow-card-home: 0 4px 8px rgba(139, 92, 246, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
   --shadow-purple: rgba(139, 92, 246, 0.1);
   --shadow-recent-finds: 0 4px 8px rgba(139, 92, 246, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);

   /* Status backgrounds for cards */
   --status-always-tap-cask-bg: rgba(255, 215, 0, 0.1);
   --status-always-bottle-can-bg: rgba(0, 245, 0, 0.1);
   --status-currently-bg: var(--orange);
   --status-not-currently-bg: rgba(239, 68, 68, 0.1);
   --status-unknown-bg: rgba(156, 163, 175, 0.1);
   
   /* Transitions */
   --transition-fast: 0.15s ease-out;
   --transition: 0.25s ease-out;
   --transition-slow: 0.4s ease-out;

   /* Borders */
   --border-light: rgba(0, 0, 0, 0.1);
   --border-purple: rgba(139, 92, 246, 0.3);
   --border-orange: rgba(249, 115, 22, 0.3);
   --border-recent-finds: rgba(139, 92, 246, 0.07);
   --border-status-currently: rgba(249, 115, 22, 0.3);
   
   /* Dividers, borders & hovers */
   --divider-color: rgba(102, 126, 234, 0.1);       
   --hover-subtle: rgba(102, 126, 234, 0.05);   

   /* Modal Variables */
   --modal-backdrop: rgba(0, 0, 0, 0.8);
   --modal-blur: blur(5px);
   --modal-line: rgba(226,232,240);   
   
   /* Spacing */
   --recent-finds-padding: clamp(1rem, 3vw, 1.5rem);
   --recent-finds-gap: clamp(0.75rem, 2vw, 1rem);
   --border-recent-finds-radius: var(--radius-xl);
   
   /* Typography */
   --recent-finds-title-size: clamp(1.125rem, 2.5vw, 1.25rem);
   --recent-finds-text-size: clamp(0.875rem, 2vw, 0.95rem);
   --recent-finds-location-size: clamp(0.75rem, 1.5vw, 0.85rem);
   --recent-finds-time-size: clamp(0.7rem, 1.5vw, 0.8rem);      
}

/* ================================
   RESET & BASE
   ================================ */
*,
*::before,
*::after {
   box-sizing: border-box;
}

/* Navigation visibility based on page context */
body.page-home .nav-notification-btn { display: flex !important; }
body.page-results .nav-back-btn,
body.page-results .nav-toggle { display: flex !important; }
body.page-search .nav-back-btn { display: flex !important; }
body.page-map .nav-back-btn,
body.page-map .nav-toggle { display: block !important; }
body.page-venue .nav-back-btn { display: flex !important; }
body.page-contact .nav-back-btn { display: flex !important; }
body.page-breweries .nav-back-btn { display: flex !important; }
body.page-community .nav-back-btn { display: flex !important; }
body.page-privacy .nav-back-btn { display: flex !important; }
body.page-terms .nav-back-btn { display: flex !important; }
body.page-liability .nav-back-btn { display: flex !important; }
body.page-about-gf .nav-back-btn { display: flex !important; }
body.page-discoveries .nav-back-btn { display: flex !important; }

body {
    background: var(--primary-gradient);
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    /* Updated padding to account for safe areas */
    padding-top: calc(var(--nav-height) + env(safe-area-inset-top));
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
}

html {
   scroll-behavior: smooth;
   font-size: clamp(14px, 2.5vw, 16px);
   overflow-x: hidden;
   overflow-y: auto;
}

.container {
   height: 100%;
}

/* ================================
   BASE OVERLAY STYLES
   ================================ */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-overlay);
    overflow-y: auto;
    display: none;
    /* Account for nav bars AND safe areas */
    padding-top: calc(var(--nav-height) + env(safe-area-inset-top));
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));    
    background: var(--bg-home-page);
}

.overlay.active {
    display: flex; 
    flex-direction: column;
}

/* ================================
   TOGGLE SWITCHES
   ================================ */

/* .toggle-switch {
   display: flex;
   align-items: center;
   gap: var(--space-md);
   cursor: pointer;
}

.toggle-input {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.toggle-slider {
   width: 50px;
   height: 26px;
   background: var(--border-light);
   border-radius: 13px;
   position: relative;
   transition: all var(--transition);
}

.toggle-input:checked + .toggle-slider {
   background: var(--purple);
}

.toggle-input:checked + .toggle-slider::after {
   transform: translateX(24px);
}

.toggle-label {
   font-weight: 500;
   color: var(--text-primary);
   cursor: pointer;
} */