:root{
  color-scheme: light;

  /* Typography */
  --font-sans: 'IBM Plex Sans Arabic', sans-serif;
  --font-mono: 'IBM Plex Sans Arabic', sans-serif;

  /* Brand colors */
  --navy:   #173665;
  --navy2:  #0d2447;
  --gold:   #e3bc34;
  --cyan:   #23dcd5;
  --success:#16a34a;
  --warn:   #f59e0b;
  --danger: #dc2626;

  /* Surfaces */
  --bg:      #e8eef5;
  --card:    #ffffff;
  --paper:   #f8f6ef;
  --surface: var(--card);
  --surface-2:#f4f7fb;
  --surface-3:#edf3fa;

  /* Text */
  --text:       #172033;
  --text-strong:#0f172a;
  --muted:      #64748b;

  /* Borders */
  --line:        #d9e2ef;
  --line-strong: #c7d4e6;
  --border-soft: rgba(23,54,101,.12);
  --border-strong: rgba(23,54,101,.22);

  /* Radius */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius: var(--radius-lg);

  /* Shadows */
  --shadow-xs: 0 2px 8px rgba(13,36,71,.06);
  --shadow-sm: 0 8px 18px rgba(13,36,71,.08);
  --shadow-md: 0 14px 32px rgba(13,36,71,.12);
  --shadow:    0 18px 48px rgba(13,36,71,.16);
  --shadow-lg: 0 26px 64px rgba(13,36,71,.20);

  /* Motion */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-emphasized: cubic-bezier(.16,1,.3,1);
  --duration-quick: 120ms;
  --duration-fast: 180ms;
  --duration-medium: 240ms;
  --duration-slow: 320ms;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Controls & layout */
  --control-h-sm: 34px;
  --control-h: 40px;
  --control-h-lg: 44px;
  --content-max: 1440px;
  --sidebar-w: 360px;
  --admin-sidebar-w: 260px;
  --admin-preview-w: 380px;

  /* Stacking */
  --z-base: 1;
  --z-sticky: 20;
  --z-float: 80;
  --z-overlay: 160;
  --z-modal: 280;
  --z-toast: 320;
  --z-max: 9999;

  /* Derived */
  --backdrop: rgba(13,36,71,.62);
  --gradient-accent: linear-gradient(135deg, var(--cyan) 0%, var(--gold) 100%);
  --gradient-shell: linear-gradient(135deg, #edf3fa, #f8fafc);
  --gradient-panel: linear-gradient(135deg, #fff, #f7f9fc);
  --gradient-brand: linear-gradient(135deg, var(--navy), var(--navy2));
}