/**
* StileSalentino Design System Variables
* =================================================================
* All your hardcoded values converted to a systematic approach
*/

:root {


/* DEBUG: Add a visible indicator that variables are loading */
/*--debug-variables-loaded: "LOADED"; /* This will show in dev tools */

/* LAYOUT SYSTEM */
--container-max-width: 1200px;
--grid-gutter: 1.5rem;
--grid-columns: 12;

/* =================================================================
* EXISTING BENTO GRID SETTINGS (Keep as-is)
* ================================================================= */
--bento-grid-height: 400px;
--bento-gap: 12px;
--bento-border-radius: 16px;
--bento-item-radius: 12px;

/* GRID SYSTEMS */
--standard-grid-columns: repeat(auto-fill, minmax(280px, 1fr));
--standard-grid-gap: var(--space-lg);

/* =================================================================
* SPACING SYSTEM (From your actual values)
* ================================================================= */
--space-xs: 8px; /* Small gaps, margins */
--space-sm: 10px; /* Category filter gaps */
--space-md: 15px; /* Mobile padding, search margin */
--space-lg: 16px; /* Popup margins, input padding */
--space-xl: 20px; /* Standard padding (map, search, containers) */
--space-2xl: 24px; /* Button padding */
--space-3xl: 30px; /* Section margins */
--space-4xl: 32px; /* Large padding (2rem) */

/* =================================================================
* SIZING SYSTEM (From your actual dimensions)
* ================================================================= */
--size-control: 32px; /* Map control width/height */
--size-marker: 30px; /* Marker size */
--size-popup-width: 300px; /* Popup max width */
--size-popup-width-mobile: 250px;

/* Map heights */
--height-map-desktop: 500px;
--height-map-tablet: 450px;
--height-map-mobile: 350px;

/* =================================================================
* BORDER RADIUS SYSTEM (From your actual values)
* ================================================================= */
--radius-xs: 6px; /* Button radius */
--radius-sm: 8px; /* Input radius, control radius */
--radius-md: 12px; /* Standard radius (map, search, popup category) */
--radius-lg: 16px; /* Container radius */
--radius-pill: 20px; /* Category button radius */
--radius-circle: 50%; /* Marker radius */

/* =================================================================
* SHADOW SYSTEM (From your actual shadows)
* ================================================================= */
--shadow-control: 0 4px 12px rgba(0,0,0,0.15); /* Map controls */
--shadow-search: 0 4px 16px rgba(0,0,0,0.05); /* Search form */
--shadow-container: 0 8px 32px rgba(0,0,0,0.1); /* Map container, white container */
--shadow-popup: 0 8px 32px rgba(0,0,0,0.2); /* Popup */
--shadow-marker: 0 4px 12px rgba(0,0,0,0.3); /* Marker */
--shadow-marker-hover: 0 6px 18px rgba(0,0,0,0.4); /* Marker hover */
--shadow-bento: 0 4px 24px rgba(0,0,0,0.09); /* Bento items */
--shadow-bento-hover: 0 8px 32px rgba(0,0,0,0.15); /* Bento hover */
--shadow-button: 0 8px 24px rgba(0,0,0,0.2); /* Button hover */
--shadow-category: 0 4px 12px rgba(102,126,234,0.3); /* Category button */
--shadow-popup-btn: 0 4px 12px rgba(102,126,234,0.3); /* Popup button */
--shadow-directions: 0 4px 12px rgba(78,205,196,0.3); /* Directions button */

/* =================================================================
* TYPOGRAPHY SYSTEM (From your actual font sizes)
* ================================================================= */
--font-size-xs: 0.75rem; /* 12px - popup category */
--font-size-sm: 0.85rem; /* 13.6px - popup button */
--font-size-base: 0.9rem; /* 14.4px - category button */
--font-size-md: 1rem; /* 16px - input */
--font-size-lg: 1.1rem; /* 17.6px - popup title */

/* =================================================================
* BORDER SYSTEM (From your actual borders)
* ================================================================= */
--border-thin: 1px solid #e9ecef; /* Search form */
--border-medium: 2px solid #e9ecef; /* Input, category button */
--border-thick: 3px solid white; /* Marker */

/* =================================================================
* TRANSITION SYSTEM (Your consistent timing)
* ================================================================= */
--transition-fast: all 0.18s ease; /* Image transform */
--transition-normal: all 0.3s ease; /* Standard transition */

/* =================================================================
* Z-INDEX SCALE
* ================================================================= */
--z-bento-hover: 10;
--z-marker-hover: 1000;

/* =================================================================
* STEP 1.3: ACCESSIBILITY FOUNDATION VARIABLES
* Essential accessibility tokens following WCAG 2.1 AA standards
* ================================================================= */

/* Focus & Interaction States */
--focus-outline: #0066cc; /* High contrast blue for focus indicators */
--focus-outline-dark: #66aaff; /* Lighter blue for dark themes */
--focus-offset: 2px; /* Standard focus outline offset */
--focus-width: 3px; /* Standard focus outline width */

/* Accessible Color System */
--text-primary: #111827; /* High contrast black (21:1 ratio on white) */
--text-secondary: #4b5563; /* Medium gray (9.7:1 ratio - exceeds AA) */
--text-muted: #6b7280; /* Light gray (4.6:1 ratio - meets AA) */
--text-inverse: #ffffff; /* White text for dark backgrounds */

/* Background Colors */
--color-surface: #ffffff; /* Pure white surface */
--color-background: #f9fafb; /* Light gray background */
--color-surface-dark: #1f2937; /* Dark mode surface */
--color-background-dark: #111827; /* Dark mode background */

/* Accessible Link Colors */
--link-color: #2563eb; /* Blue with 4.5:1 contrast ratio */
--link-hover: #1d4ed8; /* Darker blue for hover state */
--link-visited: #7c3aed; /* Purple for visited links */
--link-focus: var(--focus-outline); /* Focus state color */

/* Accessible Status Colors */
--color-success: #059669; /* Green with sufficient contrast */
--color-warning: #d97706; /* Orange with sufficient contrast */
--color-error: #dc2626; /* Red with sufficient contrast */
--color-info: #2563eb; /* Blue with sufficient contrast */

/* High Contrast Variants */
--color-success-text: #065f46; /* Darker green for text */
--color-warning-text: #92400e; /* Darker orange for text */
--color-error-text: #991b1b; /* Darker red for text */
--color-info-text: #1e40af; /* Darker blue for text */

/* Touch Target Sizes (WCAG AAA) */
--touch-target-min: 44px; /* Minimum touch target size */
--touch-target-comfortable: 48px; /* Comfortable touch target */

/* Form Element Accessibility */
--form-border-default: #e5e7eb; /* Default form border */
--form-border-focus: var(--focus-outline); /* Focus state border */
--form-border-error: var(--color-error); /* Error state border */
--form-border-success: var(--color-success); /* Success state border */

/* Skip Link Positioning */
--skip-link-top-hidden: -40px; /* Hidden position */
--skip-link-top-visible: 6px; /* Visible position */
--skip-link-z-index: 100000; /* High z-index for skip links */

/* Screen Reader & Hidden Content */
--sr-only-size: 1px; /* Screen reader only element size */

/* High Contrast Mode Support */
--border-high-contrast: 2px solid; /* Border for high contrast mode */

}



/* =================================================================
* DEBUG: Visible indicator that variables.css loaded
* ================================================================= */
/*body::before {
  content: "✅ Variables.css loaded: " var(--debug-variables-loaded);
  position: fixed;
  top: 0;
  right: 0;
  background: #00ff00;
  color: #000;
  padding: 5px 10px;
  font-size: 12px;
  z-index: 999999;
  font-weight: bold;
}
*/


/* =================================================================
* RESPONSIVE OVERRIDES (From your media queries) - FIXED SYNTAX
* ================================================================= */
@media (max-width: 768px) {
  :root {
    --bento-grid-height: 300px;
    --height-map-desktop: var(--height-map-mobile);
    --space-xl: var(--space-md); /* Reduce padding on mobile */
    --space-3xl: var(--space-xl); /* Reduce margins on mobile */
    --space-gap-mobile: var(--space-xs); /* 8px for mobile bento gaps */
    
    /* Accessibility adjustments for mobile */
    --touch-target-min: 48px; /* Larger touch targets on mobile */
  }
}

@media (max-width: 480px) {
  :root {
    --bento-grid-height: 250px;
    --touch-target-min: 48px; /* Maintain large touch targets */
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --height-map-desktop: var(--height-map-tablet);
  }
}

/* =================================================================
* DARK MODE ACCESSIBILITY OVERRIDES
* ================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f9fafb; /* Light text for dark backgrounds */
    --text-secondary: #d1d5db; /* Medium gray for dark mode */
    --text-muted: #9ca3af; /* Light gray for dark mode */
    --color-surface: var(--color-surface-dark);
    --color-background: var(--color-background-dark);
    --focus-outline: var(--focus-outline-dark);
    
    /* Adjust status colors for dark mode */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;
  }
}

/* =================================================================
* HIGH CONTRAST MODE SUPPORT
* ================================================================= */
@media (prefers-contrast: high) {
  :root {
    --focus-width: 4px; /* Thicker focus outlines in high contrast */
    --border-medium: var(--border-high-contrast); /* Ensure borders are visible */
  }
}