/* ===========================================
   PORTAL DESIGN SYSTEM - iOS Enterprise Style
   Based on Apple Human Interface Guidelines 2024-2025
   =========================================== */

:root {
  /* Typography - SF Pro inspired */
  --dr-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --dr-text-title: 22px;
  --dr-text-body: 17px;
  --dr-text-secondary: 15px;
  --dr-text-caption: 13px;
  --dr-text-small: 12px;

  /* Spacing (8pt grid system) */
  --dr-space-1: 4px;
  --dr-space-2: 8px;
  --dr-space-3: 12px;
  --dr-space-4: 16px;
  --dr-space-5: 20px;
  --dr-space-6: 24px;

  /* Colors - iOS semantic colors */
  --dr-primary: #007AFF;
  --dr-primary-hover: #0071e3;
  --dr-text-primary: #1D1D1F;
  --dr-text-secondary: #6e6e73; /* Improved contrast: ~5.5:1 vs WCAG AA 4.5:1 */
  --dr-text-tertiary: #AEAEB2;
  --dr-text-quaternary: #C7C7CC;
  --dr-border: #E5E5E7;
  --dr-border-light: #F0F0F2;
  --dr-background: #F5F5F7;
  --dr-success: #34C759;
  --dr-error: #FF3B30;
  --dr-warning: #FF9500;

  /* Glass morphism */
  --dr-glass-bg: rgba(255, 255, 255, 0.78);
  --dr-glass-bg-hover: rgba(255, 255, 255, 0.85);
  --dr-glass-bg-solid: rgba(255, 255, 255, 0.9);
  --dr-glass-border: rgba(255, 255, 255, 0.5);
  --dr-blur: blur(16px);
  --dr-saturate: saturate(180%);

  /* Border radius - iOS style */
  --dr-radius-card: 14px;
  --dr-radius-button: 12px;
  --dr-radius-input: 10px;
  --dr-radius-pill: 9999px;

  /* Shadows */
  --dr-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08);
  --dr-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
  --dr-shadow-button: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --dr-transition-fast: 0.15s ease;
  --dr-transition-normal: 0.2s ease;
  --dr-transition-spring: 0.4s cubic-bezier(0.32, 0.72, 0, 1);

  /* Touch targets - iOS minimum 44pt */
  --dr-touch-min: 44px;
}

/* ===========================================
   BASE LAYOUT STRUCTURE
   =========================================== */

.dr-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dr-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 600px;
  width: 100%;
  margin: var(--dr-space-6) auto;
  padding: var(--dr-space-6) var(--dr-space-5);
  background: var(--dr-glass-bg);
  backdrop-filter: var(--dr-blur) var(--dr-saturate);
  -webkit-backdrop-filter: var(--dr-blur) var(--dr-saturate);
  border: 1px solid var(--dr-glass-border);
  border-radius: var(--dr-radius-card);
  box-shadow: var(--dr-shadow-card);
}

.dr-header {
  text-align: center;
  flex-shrink: 0;
}

.dr-main {
  display: flex;
  flex-direction: column;
}

.dr-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: var(--dr-space-4);
}

/* ===========================================
   GLASS COMPONENTS
   =========================================== */

.dr-glass {
  background: var(--dr-glass-bg);
  backdrop-filter: var(--dr-blur) var(--dr-saturate);
  -webkit-backdrop-filter: var(--dr-blur) var(--dr-saturate);
  border: 1px solid var(--dr-glass-border);
  box-shadow: var(--dr-shadow-card);
}

.dr-glass-solid {
  background: var(--dr-glass-bg-solid);
  backdrop-filter: var(--dr-blur) var(--dr-saturate);
  -webkit-backdrop-filter: var(--dr-blur) var(--dr-saturate);
  border: 1px solid var(--dr-glass-border);
  box-shadow: var(--dr-shadow-button);
}

/* ===========================================
   MOBILE BREAKPOINTS
   =========================================== */

/* Tablet and smaller (≤500px) */
@media (max-width: 500px) {
  :root {
    --dr-text-title: 20px;
    --dr-text-body: 14px;
    --dr-text-secondary: 14px;
    --dr-text-caption: 12px;
    --dr-text-small: 11px;
  }

  .dr-card {
    margin: var(--dr-space-4);
    margin-top: max(var(--dr-space-4), env(safe-area-inset-top, var(--dr-space-4)));
    padding: var(--dr-space-5) var(--dr-space-4);
    padding-bottom: max(var(--dr-space-5), env(safe-area-inset-bottom));
    border-radius: 24px;
  }
}

/* Small phones (≤375px) - iPhone SE */
@media (max-width: 375px) {
  :root {
    --dr-text-title: 18px;
    --dr-text-body: 13px;
    --dr-text-secondary: 13px;
    --dr-text-caption: 11px;
    --dr-text-small: 10px;
  }

  .dr-card {
    margin: var(--dr-space-3);
    margin-top: max(var(--dr-space-4), env(safe-area-inset-top, var(--dr-space-4)));
    padding: var(--dr-space-4) var(--dr-space-3);
    padding-bottom: max(var(--dr-space-4), env(safe-area-inset-bottom));
    border-radius: 20px;
  }
}

/* ===========================================
   ACCESSIBILITY - Reduced Motion Support
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================
   PERFORMANCE - Lighter glassmorphism on small screens
   =========================================== */
@media (max-width: 375px) {
  :root {
    --dr-blur: blur(12px);
    --dr-saturate: none;
  }
}