/**
 * Camping Astra - Design Tokens
 *
 * CSS Variables for consistent design across plugin and theme.
 * Load this FIRST before all other CSS files.
 *
 * Usage in plugin:
 *   wp_enqueue_style('ac-variables', AC_PLUGIN_URL . 'public/css/variables.css');
 *
 * Usage in theme:
 *   @import url('/wp-content/plugins/ac-booking-core/public/css/variables.css');
 *   OR copy to theme: assets/css/variables.css
 */

:root {
  /* ==================== BRAND COLORS ==================== */
  /* Primary brand colors - green palette */
  --ac-brand-primary: #1B4332;
  --ac-brand-secondary: #2D5016;
  --ac-brand-accent: #2E8B57;
  --ac-brand-dark: #0f291e;
  --ac-brand-light: #74c99a;

  /* Secondary brand colors - earth tones */
  --ac-earth-dark: #2D5016;
  --ac-earth-medium: #2f3c2c;
  --ac-earth-light: #3d5a3e;

  /* ==================== NEUTRAL COLORS ==================== */
  /* Warm neutrals - background */
  --ac-neutral-warm: #f5f2e9;
  --ac-neutral-warm-light: #fafafa;
  --ac-neutral-warm-dark: #e9ecef;

  /* Cool neutrals */
  --ac-neutral-white: #ffffff;
  --ac-neutral-gray-50: #f8f9fa;
  --ac-neutral-gray-100: #e9ecef;
  --ac-neutral-gray-200: #dee2e6;
  --ac-neutral-gray-300: #ced4da;
  --ac-neutral-gray-600: #6c757d;
  --ac-neutral-gray-800: #343a40;

  /* Text colors */
  --ac-text-primary: #2f3c2c;
  --ac-text-secondary: #666666;
  --ac-text-muted: #888888;
  --ac-text-inverse: #ffffff;

  /* ==================== SEMANTIC COLORS ==================== */
  --ac-success: #52B788;
  --ac-success-bg: rgba(82, 183, 136, 0.1);
  --ac-success-text: #155724;

  --ac-error: #dc3545;
  --ac-error-bg: rgba(220, 53, 69, 0.1);
  --ac-error-text: #721c24;

  --ac-warning: #ffc107;
  --ac-warning-bg: rgba(255, 193, 7, 0.1);
  --ac-warning-text: #856404;

  --ac-info: #17a2b8;
  --ac-info-bg: rgba(23, 162, 184, 0.1);
  --ac-info-text: #0c5460;

  /* ==================== SPACING SCALE ==================== */
  --ac-spacing-xs: 4px;
  --ac-spacing-sm: 8px;
  --ac-spacing-md: 16px;
  --ac-spacing-lg: 24px;
  --ac-spacing-xl: 32px;
  --ac-spacing-2xl: 40px;
  --ac-spacing-3xl: 64px;

  /* Form-specific spacing */
  --ac-form-spacing-xs: 5px;
  --ac-form-spacing-sm: 10px;
  --ac-form-spacing-md: 12px;
  --ac-form-spacing-lg: 15px;
  --ac-form-spacing-xl: 20px;

  /* ==================== BORDER RADIUS ==================== */
  --ac-radius-sm: 4px;
  --ac-radius-md: 8px;
  --ac-radius-lg: 12px;
  --ac-radius-xl: 16px;
  --ac-radius-2xl: 24px;
  --ac-radius-full: 30px;
  --ac-radius-circle: 50%;

  /* ==================== TYPOGRAPHY ==================== */
  /* Font families */
  --ac-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ac-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font sizes */
  --ac-text-xs: 12px;
  --ac-text-sm: 13px;
  --ac-text-base: 16px;
  --ac-text-md: 17px;
  --ac-text-lg: 18px;
  --ac-text-xl: 20px;
  --ac-text-2xl: 24px;
  --ac-text-3xl: 30px;
  --ac-text-4xl: 36px;
  --ac-text-5xl: 48px;

  /* Font weights */
  --ac-font-normal: 400;
  --ac-font-medium: 500;
  --ac-font-semibold: 600;
  --ac-font-bold: 700;

  /* Line heights */
  --ac-leading-tight: 1.4;
  --ac-leading-normal: 1.6;
  --ac-leading-relaxed: 1.8;

  /* ==================== LAYOUT ==================== */
  /* Container widths */
  --ac-container-sm: 600px;
  --ac-container-md: 800px;
  --ac-container-lg: 1000px;
  --ac-container-xl: 1200px;

  /* Form widths */
  --ac-form-width-sm: 200px;
  --ac-form-width-md: 300px;
  --ac-form-width-full: 100%;

  /* ==================== SHADOWS ==================== */
  --ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ac-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06);
  --ac-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --ac-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* Brand shadow (with green tint) */
  --ac-shadow-brand: 0 10px 30px rgba(27, 67, 50, 0.1);
  --ac-shadow-brand-sm: 0 4px 12px rgba(27, 67, 50, 0.08);

  /* Focus ring */
  --ac-focus-ring: 0 0 0 3px rgba(82, 183, 136, 0.1);
  --ac-focus-ring-accent: 0 0 0 3px rgba(46, 139, 87, 0.15);

  /* ==================== BORDERS ==================== */
  --ac-border-color: #e9ecef;
  --ac-border-color-dark: #d8d6ce;
  --ac-border-color-focus: var(--ac-brand-accent);

  --ac-border-width: 1px;
  --ac-border-width-thick: 2px;

  /* ==================== TRANSITIONS ==================== */
  --ac-transition-fast: 0.15s ease;
  --ac-transition-base: 0.3s ease;
  --ac-transition-slow: 0.5s ease;

  --ac-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ac-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ac-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ==================== Z-INDEX ==================== */
  --ac-z-dropdown: 1000;
  --ac-z-sticky: 1020;
  --ac-z-fixed: 1030;
  --ac-z-modal-backdrop: 1040;
  --ac-z-modal: 1050;
  --ac-z-popover: 1060;
  --ac-z-tooltip: 1070;
}

/* ==================== DARK MODE SUPPORT ==================== */
/* Dark mode disabled - site should always use light theme
 * regardless of system preferences.
 *
 * If dark mode is needed in the future, implement as a user-controlled
 * toggle (not automatic based on system preferences).
 */

/* ==================== PRINT STYLES ==================== */
@media print {
  :root {
    --ac-spacing-xs: 0;
    --ac-spacing-sm: 2mm;
    --ac-spacing-md: 3mm;
    --ac-spacing-lg: 5mm;
    --ac-text-primary: #000000;
  }
}