/* ==========================================================================
   GOZOFOOD.COM - CORE UTILITIES
   ==========================================================================
   
   Consolidated core utilities including:
   - CSS Custom Properties (variables.css)
   - Font Declarations (fonts.css) 
   - Global Scrollbar Fixes (scrollbar-fix.css)
   
   This file contains foundational styles that other files depend on.
   
   Author: Gozofood.com Development Team
   Version: 1.0 - Consolidated
   Last Updated: September 2025
   ========================================================================== */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (from variables.css)
   ========================================================================== */

:root {
  /* ===== COLOR PALETTE ===== */
  /* Primary Colors - Main brand colors */
  --color-primary-green: #2D5A27;
  /* Deep forest green - main brand color */
  --color-primary-green-light: #4A7C59;
  /* Lighter version of primary green */
  --color-primary-green-dark: #1A3318;
  /* Darker version of primary green */
  --color-secondary-green: #7CB342;
  /* Fresh lime green - accent color */
  --color-primary-yellow: #FFC107;
  /* Warm golden yellow - highlight color */
  --color-primary-yellow-rgb: 255, 193, 7;
  /* RGB values for rgba usage */
  --color-orange-accent: #FF8F00;
  /* Vibrant orange - action color */

  /* Neutral Colors - Background and text colors */
  --color-white: #FFFFFF;
  /* Pure white */
  --color-black: #000000;
  /* Pure black */
  --color-gray-50: #F8F9FA;
  /* Very light gray */
  --color-gray-100: #F1F3F4;
  /* Light gray */
  --color-gray-200: #E8EAED;
  /* Medium light gray */
  --color-gray-300: #DADCE0;
  /* Medium gray */
  --color-gray-400: #BDC1C6;
  /* Medium dark gray */
  --color-gray-500: #9AA0A6;
  /* Dark gray */
  --color-gray-600: #80868B;
  /* Darker gray */
  --color-gray-700: #5F6368;
  /* Very dark gray */
  --color-gray-800: #3C4043;
  /* Near black gray */
  --color-gray-900: #202124;
  /* Almost black */

  /* Text Colors - Semantic text colors */
  --color-text-primary: #2c3e50;
  /* Main text color - dark blue-gray */
  --color-text-secondary: #7f8c8d;
  /* Secondary text color - medium gray */
  --color-text-muted: #95a5a6;
  /* Muted text color - light gray */
  --color-text-light: #ecf0f1;
  /* Light text color for dark backgrounds */

  /* Background Colors - Page and section backgrounds */
  --color-background-primary: #FFFFFF;
  /* Main page background */
  --color-background-secondary: #F8F9FA;
  /* Section backgrounds */
  --color-background-accent: #FFF9E6;
  /* Accent background (light yellow) */
  --color-neutral-bg: #FAF7F2;
  /* Cream/neutral background */
  --color-neutral-bg-rgb: 250, 247, 242;
  /* RGB values for rgba usage */

  /* Border Colors - Dividers and borders */
  --color-border-light: #E8EAED;
  /* Light borders */
  --color-border-medium: #DADCE0;
  /* Medium borders */
  --color-border-dark: #BDC1C6;
  /* Dark borders */

  /* ===== TYPOGRAPHY ===== */
  /* Font Families */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-family-secondary: 'Source Serif 4', 'Times New Roman', serif;
  --font-family-accent: 'Source Serif 4', 'Times New Roman', serif; /* Alias for secondary font used across site */
  --font-family-mono: 'Roboto Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Sizes - Responsive typography scale */
  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px - base size */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 1.875rem;
  /* 30px */
  --font-size-4xl: 2.25rem;
  /* 36px */
  --font-size-5xl: 3rem;
  /* 48px */
  --font-size-6xl: 3.75rem;
  /* 60px */
  --font-size-7xl: 4.5rem;
  /* 72px */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* ===== SPACING ===== */
  /* Spacing scale based on 4px grid */
  --spacing-xs: 0.25rem;
  /* 4px */
  --spacing-sm: 0.5rem;
  /* 8px */
  --spacing-md: 1rem;
  /* 16px */
  --spacing-lg: 1.5rem;
  /* 24px */
  --spacing-xl: 2rem;
  /* 32px */
  --spacing-2xl: 2.5rem;
  /* 40px */
  --spacing-3xl: 3rem;
  /* 48px */
  --spacing-4xl: 4rem;
  /* 64px */
  --spacing-5xl: 5rem;
  /* 80px */
  --spacing-6xl: 6rem;
  /* 96px */

  /* ===== LAYOUT ===== */
  /* Container Widths */
  --container-sm: 576px;
  --container-md: 768px;
  --container-lg: 992px;
  --container-xl: 1200px;
  --container-2xl: 1400px;

  /* Z-Index Scale */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;

  /* ===== DESIGN SYSTEM ===== */
  /* Border Radius */
  --border-radius-sm: 0.25rem;
  /* 4px */
  --border-radius-md: 0.5rem;
  /* 8px */
  --border-radius-lg: 0.75rem;
  /* 12px */
  --border-radius-xl: 1rem;
  /* 16px */
  --border-radius-full: 9999px;
  /* Full rounded */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* Animation Easing Functions */
  --ease-in-out-cubic: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-cubic: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-cubic: cubic-bezier(0.4, 0, 1, 1);
}

/* ==========================================================================
   FONT DECLARATIONS (from fonts.css)
   ========================================================================== */

/* Inter Font Family - Primary font for UI text */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
}

/* Source Serif 4 - Secondary font for headings and serif text */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/SourceSerif4-VariableFont.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/SourceSerif4-Italic-VariableFont_opsz.wght.ttf') format('truetype-variations');
}

/* Roboto Mono - Monospace font for code and technical text */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/RobotoMono-VariableFont_wght.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

/* ==========================================================================
   GLOBAL SCROLLBAR FIXES (from scrollbar-fix.css)
   ========================================================================== */

/* Global scrollbar styling for consistent appearance across browsers */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

html::-webkit-scrollbar {
  width: 8px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Hide scrollbars for specific navigation elements */
.nav__desktop,
.nav__desktop-menu,
.nav__mobile,
.nav__mobile-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav__desktop::-webkit-scrollbar,
.nav__desktop-menu::-webkit-scrollbar,
.nav__mobile::-webkit-scrollbar,
.nav__mobile-content::-webkit-scrollbar {
  display: none;
}