/* ملف css/variables.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');

:root {
  /* Colors & Surface Architecture */
  --surface: #f9f6f5; /* Base Layer */
  --surface-container-low: #f3f0ef; /* Secondary Sections */
  --surface-container-high: #e4e2e1; /* Deep Recess (Inputs) */
  --surface-container-lowest: #ffffff; /* Elevated Components (Cards) */
  --surface-bright: #fafafa; /* Card hover state */
  
  --primary: #702ae1;
  --primary-container: #b28cff;
  --primary-dim: #5a22b5;
  --primary-fixed-dim: #e8deff; /* For icon backgrounds */
  
  --on-surface: #2f2f2e; /* Text color */
  --on-surface-variant: #5f5f5e; /* Labels & muted text */
  --inverse-surface: #0e0e0e; /* No pure black rule */

  /* Gradients & Glassmorphism */
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-container));
  --glass-bg: rgba(249, 246, 245, 0.8);
  --glass-blur: blur(24px);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif; /* Hooks & Headlines */
  --font-body: 'Inter', sans-serif; /* Reading & Details */

  /* Elevation & Depth (Tonal Layering - No Drop Shadows) */
  --shadow-ambient: 0px 0px 40px 0px rgba(47, 47, 46, 0.06); /* Tinted, soft shadow */
  --ghost-border: 1px solid rgba(112, 42, 225, 0.2); /* 20% primary for active states */
  --ghost-border-light: 1px solid rgba(47, 47, 46, 0.15); /* 15% for accessibility */
  
  /* Radii */
  --radius-md: 12px;
  --radius-full: 9999px; /* Pill shape */
}

/* تطبيق قاعدة "لا خطوط - No Line Rule" */
* {
  border: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}