/**
 * GeoFazendas Modal Base - Design Tokens & Body State
 * Part of the modal-base component system.
 *
 * CSS custom properties (design tokens) for modal sizing, colors,
 * animations, and z-index layers. Also includes body scroll lock.
 */

/**
 * GeoFazendas Modal Base Component
 * 
 * Unified modal system with mobile-first design:
 * - Mobile (≤768px): Bottom sheet with swipe-to-close gesture
 * - Desktop (>768px): Centered dialog with scale animation
 * 
 * Usage: Include this CSS globally via base.html
 * See static/js/modal-base.js for JavaScript controller
 * See templates/components/modal_base.html for HTML structure
 * 
 * @version 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Modal sizing */
  --gf-modal-width-sm: 400px;
  --gf-modal-width-md: 520px;
  --gf-modal-width-lg: 720px;
  --gf-modal-width-xl: 900px;
  
  /* Mobile bottom sheet */
  --gf-modal-mobile-max-height: 90dvh;
  --gf-modal-mobile-border-radius: 1.25rem;
  --gf-modal-handle-width: 40px;
  --gf-modal-handle-height: 4px;
  
  /* Animation timing */
  --gf-modal-transition-duration: 0.3s;
  --gf-modal-transition-easing: cubic-bezier(0.32, 0.72, 0, 1);
  
  /* Z-index layers */
  --gf-modal-z-index: 1060;
  --gf-modal-backdrop-z-index: 1055;
  
  /* Colors */
  --gf-modal-backdrop-color: rgba(15, 23, 42, 0.6);
  --gf-modal-background: #ffffff;
  --gf-modal-border-color: rgba(0, 0, 0, 0.1);
  --gf-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --gf-modal-handle-color: rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Body State - Prevents scroll when modal is open
   ========================================================================== */

body.gf-modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* iOS Safari fix for body scroll lock */
body.gf-modal-open {
  -webkit-overflow-scrolling: none;
}