/* ==========================================================================
   ATHAR LANDING PAGE - BASE STYLES & VARIABLES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;900&display=swap');

:root {
  /* Core Color Palette (Matching Flutter App Theme) */
  --bg-dark: #0D1117;
  --surface-dark: #161B22;
  --surface-variant: #21262D;
  --card-dark: #1C2128;
  --card-elevated: #252B33;
  --divider-dark: #30363D;
  
  --primary-deep: #0F4C5C;
  --primary-teal: #1E6B7A;
  --primary-light: #2A8F9C;
  --primary-soft: #3AAFB8;
  
  --accent-gold: #D4AF37;
  --accent-sand: #CFB370;
  --accent-soft: #E5D4A1;
  --accent-cream: #F5ECD7;
  
  --text-primary: #F0F6FC;
  --text-secondary: #8B949E;
  --text-tertiary: #6E7681;
  
  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--primary-deep), var(--primary-teal));
  --grad-gold: linear-gradient(135deg, var(--accent-sand), var(--accent-gold));
  --grad-dark: linear-gradient(180deg, var(--bg-dark) 0%, var(--surface-dark) 100%);
  --grad-glow: radial-gradient(circle at 50% 50%, rgba(30, 107, 122, 0.15) 0%, transparent 70%);

  /* Typography */
  --font-main: 'Cairo', 'Tajawal', sans-serif;
  --font-accent: 'Amiri', serif;
  
  /* Layout & Spacing */
  --border-radius: 16px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1200px;
}

/* Reset & Global Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-dark);
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
  position: relative;
}

/* Background Sacred Glows */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 800px;
  background: var(--grad-glow);
  pointer-events: none;
  z-index: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

/* Common Layout Helper */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}