/*
 * Renhel Core - Premium Design System Tokens
 * Defines color palettes, typography, spacing, and animations for the End-to-End Rent-a-car UX.
 */

:root {
  /* Global style bridge (Elementor -> WP preset -> Renhel fallback) */
  --rh-color-primary: var(--e-global-color-primary, var(--wp--preset--color--primary, #0F172A));
  --rh-color-primary-light: var(--e-global-color-secondary, var(--wp--preset--color--secondary, #1E293B));
  --rh-color-accent: var(--e-global-color-accent, var(--wp--preset--color--accent, #10B981));
  --rh-color-accent-hover: var(--e-global-color-accent, var(--wp--preset--color--accent, #059669));
  
  --rh-color-bg-base: var(--wp--preset--color--base, #F1F5F9);
  --rh-color-bg-panel: var(--wp--preset--color--base, #FFFFFF);
  --rh-color-surface-1: var(--wp--preset--color--base, #FFFFFF);
  --rh-color-surface-2: var(--wp--preset--color--base-2, #F8FAFC);
  --rh-color-surface-3: var(--wp--preset--color--base-3, #F1F5F9);
  
  --rh-text-primary: var(--e-global-color-text, var(--wp--preset--color--contrast, #0F172A));
  --rh-text-secondary: var(--e-global-color-secondary, var(--wp--preset--color--secondary, #475569));
  --rh-text-muted: var(--wp--preset--color--contrast-2, #94A3B8);
  
  --rh-border-color: var(--wp--preset--color--tertiary, #E2E8F0);
  --rh-border-focus: rgba(16, 185, 129, 0.4);
  
  /* Typography - Global typography from Elementor/WP when available */
  --rh-font-sans: var(--e-global-typography-text-font-family, var(--wp--preset--font-family--body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
  --rh-font-display: var(--e-global-typography-primary-font-family, var(--wp--preset--font-family--heading, var(--rh-font-sans)));
  
  --rh-font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --rh-font-size-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --rh-font-size-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --rh-font-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --rh-font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --rh-font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  
  /* Border Radius - Premium Squircles */
  --rh-radius-sm: 10px;
  --rh-radius-md: 18px;
  --rh-radius-lg: 28px;
  --rh-radius-full: 9999px;
  
  /* Shadows - Layered & Realist */
  --rh-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --rh-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --rh-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --rh-shadow-floating: 0 25px 50px -12px rgba(0,0,0,0.15);
  
  /* Animations */
  --rh-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --rh-transition-fast: 200ms var(--rh-ease-smooth);
  --rh-transition-normal: 400ms var(--rh-ease-smooth);
  
  /* Glassmorphism */
  --rh-glass-bg: rgba(255, 255, 255, 0.8);
  --rh-glass-border: 1px solid rgba(255, 255, 255, 0.3);
  --rh-glass-blur: blur(16px);
}

/* Base resets & setups */
.rh-premium-ui {
  font-family: var(--rh-font-sans);
  color: var(--rh-text-primary);
  background-color: var(--rh-color-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rh-premium-ui h1, .rh-premium-ui h2, .rh-premium-ui h3, .rh-premium-ui h4 {
  font-family: var(--rh-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rh-color-primary);
}

/* Skeleton Loading Animation */
@keyframes rh-skeleton-pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.rh-skeleton {
  background: #E2E8F0;
  animation: rh-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: var(--rh-radius-md);
}

/* Fade in animation */
@keyframes rh-fade-in-up {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.rh-animate-in {
  animation: rh-fade-in-up var(--rh-transition-normal) forwards;
}

/* Shared Buttons */
.rh-btn-primary {
  background: var(--rh-color-primary) !important;
  color: #FFFFFF !important;
  font-family: var(--rh-font-sans) !important;
  font-weight: 500 !important;
  padding: 12px 24px !important;
  border-radius: var(--rh-radius-full) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--rh-transition-fast) !important;
  box-shadow: var(--rh-shadow-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.rh-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--rh-shadow-lg) !important;
  background: var(--rh-color-primary-light) !important;
}

.rh-btn-accent {
  background: var(--rh-color-accent) !important;
  color: #FFFFFF !important;
  font-family: var(--rh-font-sans) !important;
  font-weight: 500 !important;
  padding: 12px 24px !important;
  border-radius: var(--rh-radius-full) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--rh-transition-fast) !important;
  box-shadow: var(--rh-shadow-md) !important;
  text-decoration: none !important;
}

.rh-btn-accent:hover {
  transform: translateY(-2px) !important;
  background: var(--rh-color-accent-hover) !important;
  box-shadow: var(--rh-shadow-lg) !important;
}

.rh-btn-secondary {
  background: var(--rh-color-bg-panel) !important;
  color: var(--rh-color-primary) !important;
  font-family: var(--rh-font-sans) !important;
  font-weight: 500 !important;
  padding: 12px 24px !important;
  border-radius: var(--rh-radius-full) !important;
  border: 1px solid var(--rh-border-color) !important;
  cursor: pointer !important;
  transition: all var(--rh-transition-fast) !important;
}

.rh-btn-secondary:hover {
  background: var(--rh-color-bg-base) !important;
  border-color: var(--rh-text-muted) !important;
}

.rh-btn-disabled, .rh-btn-primary:disabled, .rh-btn-accent:disabled {
  background: var(--rh-text-muted) !important;
  color: #FFFFFF !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
}

/* -------------------------------------------------------------------------- */
/* Minimal Professional Theme Layer (shared wp-admin + operational panel)     */
/* -------------------------------------------------------------------------- */

:root {
  --rh-color-primary: #1f3552;
  --rh-color-primary-light: #2d4a70;
  --rh-color-accent: #0f766e;
  --rh-color-accent-hover: #0d5f59;

  --rh-color-bg-base: #f4f6f8;
  --rh-color-bg-panel: #ffffff;
  --rh-color-surface-1: #ffffff;
  --rh-color-surface-2: #f8fafc;
  --rh-color-surface-3: #eef2f6;

  --rh-text-primary: #0f172a;
  --rh-text-secondary: #475569;
  --rh-text-muted: #64748b;
  --rh-color-heading: #0b1626;

  --rh-border-color: #dbe3ec;
  --rh-border-focus: rgba(31, 53, 82, 0.24);

  --rh-font-sans: "Manrope", "IBM Plex Sans", "Nunito Sans", "Segoe UI", sans-serif;
  --rh-font-display: "Manrope", "IBM Plex Sans", "Nunito Sans", "Segoe UI", sans-serif;

  --rh-radius-sm: 8px;
  --rh-radius-md: 12px;
  --rh-radius-lg: 16px;

  --rh-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --rh-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06);
  --rh-shadow-lg: 0 16px 34px rgba(15, 23, 42, 0.08);
}