/**
 * CSS Variables & Custom Properties
 * ==================================
 * Central location for all theme variables
 * Ensures consistency across all CSS modules
 */

:root {
  color-scheme: light;

  /* ====================
     FLOATING ACTION BUTTONS (FAB)
     ==================== */

  --giw-fab-size: 60px;
  --giw-fab-gap: 0.75rem;
  --giw-fab-avoid-right: 0px;
  --giw-fab-avoid-bottom: 0px;
  --giw-fab-right: max(0.9rem, env(safe-area-inset-right));
  --giw-fab-bottom: max(0.9rem, env(safe-area-inset-bottom));
  --giw-fab-stack-width: calc(var(--giw-fab-size) + var(--giw-fab-size) + var(--giw-fab-gap));

  /* ====================
     COLOR PALETTE - Water Theme
     ==================== */

  /* Primary Water Blues */
  --water-100: #E8F5FC;
  --water-200: #C5E3F6;
  --water-300: #B3E5FC;
  --water-400: #81D4FA;
  --water-500: #4FC3F7;
  --water-600: #00B4D8;
  --water-700: #0077BE;
  --water-800: #0D3B66;
  --water-900: #091E42;

  /* Accent Colors */
  --accent-cyan: #00D4E4;
  --accent-teal: #00B4D8;
  --accent-blue: #0077BE;
  --accent-navy: #0D3B66;

  /* Gradients */
  --gradient-water: linear-gradient(135deg, #0077BE, #00D4E4);
  --gradient-ocean: linear-gradient(180deg, #0D3B66 0%, #0077BE 50%, #00D4E4 100%);
  --gradient-surface: linear-gradient(135deg, rgba(0, 119, 190, 0.1), rgba(0, 212, 228, 0.05));

  /* ====================
     SPACING & SIZING
     ==================== */

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 50%;

  /* ====================
     TYPOGRAPHY
     ==================== */

  --font-primary: 'Crimson Pro', Georgia, serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* ====================
     SHADOWS
     ==================== */

  --shadow-sm: 0 2px 4px rgba(0, 119, 190, 0.1);
  --shadow-md: 0 8px 25px rgba(0, 119, 190, 0.2);
  --shadow-lg: 0 15px 50px rgba(0, 119, 190, 0.3);
  --shadow-xl: 0 25px 75px rgba(0, 119, 190, 0.4);
  --shadow-glow: 0 0 30px rgba(0, 212, 228, 0.5);

  /* ====================
     TRANSITIONS
     ==================== */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ====================
     Z-INDEX LAYERS
     ==================== */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-overlay: 1000;
  --z-modal: 9000;
  --z-popover: 9500;
  --z-tooltip: 9990;
  --z-max: 9999;

  /* ====================
     ANIMATIONS
     ==================== */

  --animation-float: float 6s ease-in-out infinite;
  --animation-pulse: pulse 2s ease-in-out infinite;
  --animation-shimmer: shimmer 3s linear infinite;
  --animation-ripple: ripple 0.6s ease-out;
  --animation-water-flow: waterFlow 20s ease-in-out infinite;
  --animation-rise: riseUp 15s linear infinite;
}

/* ====================
   DARK MODE VARIABLES
   ==================== */

body.dark-mode {
  color-scheme: dark;

  /* Override colors for dark mode */
  --water-100: #091E42;
  --water-200: #0D3B66;
  --water-300: #0077BE;
  --water-400: #00B4D8;
  --water-500: #4FC3F7;
  --water-600: #81D4FA;
  --water-700: #B3E5FC;
  --water-800: #C5E3F6;
  --water-900: #E8F5FC;

  /* Dark mode specific */
  --bg-primary: linear-gradient(135deg, #0A1628 0%, #142441 50%, #0A1628 100%);
  --bg-secondary: linear-gradient(135deg, rgba(20, 36, 65, 0.95), rgba(13, 27, 48, 0.95));
  --bg-overlay: rgba(0, 10, 20, 0.85);

  --text-primary: #C5E3F6;
  --text-secondary: #B3E5FC;
  --text-heading: #E8F5FC;

  /* Adjusted shadows for dark mode */
  --shadow-sm: 0 2px 4px rgba(0, 212, 228, 0.1);
  --shadow-md: 0 8px 25px rgba(0, 212, 228, 0.2);
  --shadow-lg: 0 15px 50px rgba(0, 212, 228, 0.3);
  --shadow-glow: 0 0 30px rgba(0, 212, 228, 0.4);
}

/* ====================
   MEDIA QUERY VARIABLES
   ==================== */

@media (max-width: 768px) {
  :root {
    --giw-fab-size: 52px;
    --giw-fab-gap: 0.6rem;

    /* Adjust spacing for mobile */
    --spacing-xs: 0.125rem;
    --spacing-sm: 0.25rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;

    /* Adjust text sizes for mobile */
    --text-3xl: 1.5rem;
    --text-4xl: 1.875rem;
    --text-5xl: 2.25rem;
  }
}