/* ============================================================
   aregcon — Apple-Inspired White & Blue Design System
   Pristine pure white canvas (#FFFFFF), authoritative tech blues
   (#0284C7, #2563EB, #1D4ED8, #0F172A), crimson brand accents,
   ultra-refined typography, and seamless Arabic RTL support.
   ============================================================ */

:root {
  /* White & Blue Theme Palette */
  --bg-main: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-ice: #F0F7FF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FBFF;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-glass-heavy: rgba(255, 255, 255, 0.95);
  
  /* Text Hierarchy */
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-subtle: #94A3B8;

  /* Blue Color Suite */
  --blue-primary: #2563EB;   /* Tech Sapphire Blue */
  --blue-dark: #1E40AF;      /* Deep Navy Blue */
  --blue-light: #38BDF8;     /* Sky Cyan */
  --blue-accent: #0284C7;    /* Marine Blue */
  --blue-surface: #EFF6FF;   /* Soft Ice Blue Tint */
  --blue-border: rgba(37, 99, 235, 0.18);

  /* Red Signature Brand Tone (From Logo) */
  --accent-crimson: #E11D48;
  --accent-crimson-dark: #9F1239;

  /* Borders & Elevation */
  --border-light: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(37, 99, 235, 0.2);
  --border-blue: rgba(37, 99, 235, 0.35);

  /* Shadows (Apple Style Precision Elevation) */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px -4px rgba(37, 99, 235, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 36px -6px rgba(37, 99, 235, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --shadow-blue: 0 10px 30px -5px rgba(37, 99, 235, 0.25);

  /* Radius */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Cairo', 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* Base resets & smooth scrolling */
html {
  scroll-behavior: smooth;
  background-color: #FFFFFF;
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabic RTL Overrides */
html[lang="ar"], body.is-rtl {
  font-family: var(--font-arabic) !important;
}

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 {
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Frosted Glass Header */
.apple-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-light);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.apple-header.is-scrolled {
  background: var(--bg-glass-heavy);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  border-bottom-color: rgba(37, 99, 235, 0.12);
}

/* Blue & White Navigation Pill */
.lang-switcher-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: #F1F5F9;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
}

.lang-btn {
  padding: 4px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-secondary);
}

.lang-btn.is-active {
  background: var(--blue-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

/* Ambient Blue Background Mesh */
.ambient-glow-blue {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 600px;
  background: radial-gradient(circle at 50% 20%, rgba(37, 99, 235, 0.08) 0%, rgba(2, 132, 199, 0.04) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Primary Button Styling (Tech Blue & Apple Minimalism) */
.btn-primary-blue {
  background: #2563EB;
  color: #FFFFFF;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary-blue:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.btn-secondary-white {
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(15, 23, 42, 0.12);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-secondary-white:hover {
  background: #F8FAFC;
  border-color: #2563EB;
  color: #2563EB;
  transform: translateY(-1px);
}

/* Apple Cards with Crisp Blue Accents */
.apple-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.apple-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
}

/* Pillar Highlight Cards */
.pillar-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.1);
}

/* World Clock Live Indicator */
.world-clock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: #F1F5F9;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563EB;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6);
  animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

/* Simulator Tabs */
.sim-tab-btn {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sim-tab-btn.is-active {
  background: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* Badges & Tags */
.badge-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  background: #EFF6FF;
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: #1D4ED8;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.badge-crimson {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  background: #FFF1F2;
  border: 1px solid rgba(225, 29, 72, 0.2);
  color: #BE123C;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
}