@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  color-scheme: dark;
  --atlas-font: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --atlas-brand: var(--identity-primary, #6d28d9);
  --atlas-brand-strong: #5b21b6;
  --atlas-brand-secondary: var(--identity-secondary, #3b0764);
  --atlas-brand-soft: rgba(109, 40, 217, .14);
  --atlas-info: #2563eb;
  --atlas-success: #16a34a;
  --atlas-warning: var(--identity-accent, #d97706);
  --atlas-danger: #dc2626;
  --atlas-whatsapp: #25d366;
  --atlas-bg: #070b14;
  --atlas-bg-elevated: #0d1627;
  --atlas-surface: rgba(15, 25, 43, .92);
  --atlas-surface-soft: rgba(255, 255, 255, .045);
  --atlas-text: #f8fafc;
  --atlas-text-muted: #a8b3c5;
  --atlas-border: rgba(148, 163, 184, .18);
  --atlas-focus: rgba(167, 139, 250, .42);
  --atlas-space-1: 4px;
  --atlas-space-2: 8px;
  --atlas-space-3: 12px;
  --atlas-space-4: 16px;
  --atlas-space-5: 20px;
  --atlas-space-6: 24px;
  --atlas-space-8: 32px;
  --atlas-radius-sm: 10px;
  --atlas-radius-md: 14px;
  --atlas-radius-lg: 18px;
  --atlas-radius-xl: 24px;
  --atlas-shadow-sm: 0 8px 22px rgba(0, 0, 0, .2);
  --atlas-shadow-lg: 0 24px 70px rgba(0, 0, 0, .34);
  --atlas-control: 44px;
  --atlas-transition: 180ms cubic-bezier(.2, .8, .2, 1);
  --bg: var(--atlas-bg);
  --panel-solid: var(--atlas-bg-elevated);
  --panel: var(--atlas-surface);
  --muted: var(--atlas-text-muted);
  --text: var(--atlas-text);
  --brand: var(--atlas-brand);
  --brand-2: var(--atlas-brand-secondary);
  --danger: var(--atlas-danger);
  --warn: var(--atlas-warning);
  --line: var(--atlas-border);
  --radius: var(--atlas-radius-md);
  --radius-sm: var(--atlas-radius-sm);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--atlas-font); }
button, input, select, textarea { font: inherit; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--atlas-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}