/* =========================================================
   Nuqtat Tahwul — Design Tokens
   Source: Figma file tD10ZU2QwSqy2HlQLZJH22
   ========================================================= */
:root {
  /* Brand — Primary (emerald/teal) */
  --nt-primary-50:  #ECFDF5;
  --nt-primary-100: #D1FAE5;
  --nt-primary-200: #A7F3D0;
  --nt-primary-300: #6EE7B7;
  --nt-primary-400: #34D399;
  --nt-primary-500: #10B981;   /* core green from Figma */
  --nt-primary-600: #059669;
  --nt-primary-700: #047857;
  --nt-primary-800: #065F46;
  --nt-primary-gradient: linear-gradient(135deg, #10B981 0%, #14B8A6 45%, #2563EB 100%);

  /* Neutrals (slate) */
  --nt-slate-50:  #F8FAFC;
  --nt-slate-100: #F1F5F9;
  --nt-slate-200: #E2E8F0;
  --nt-slate-300: #CBD5E1;
  --nt-slate-400: #94A3B8;
  --nt-slate-500: #64748B;
  --nt-slate-600: #475569;
  --nt-slate-700: #334155;
  --nt-slate-800: #1E293B;   /* headings + footer bg from Figma */
  --nt-slate-900: #0F172A;

  /* Semantic */
  --nt-bg:         var(--nt-slate-50);
  --nt-bg-card:    #FFFFFF;
  --nt-bg-footer:  var(--nt-slate-800);
  --nt-text:       var(--nt-slate-800);
  --nt-text-body:  var(--nt-slate-600);
  /* slate-500 (#64748B) on white = 4.54:1 → meets WCAG AA. The previous
     value (slate-400) was only 2.84:1 and was flagged by Lighthouse. */
  --nt-text-muted: var(--nt-slate-500);
  --nt-border:     var(--nt-slate-200);

  /* Soft pastels — category badges / section accents */
  --nt-soft-mint:     #D1FAE5;
  --nt-soft-peach:    #FFE4D6;
  --nt-soft-lavender: #E0E7FF;
  --nt-soft-rose:     #FCE7F3;
  --nt-soft-yellow:   #FEF3C7;
  --nt-soft-sky:      #DBEAFE;

  /* Status */
  --nt-success: #10B981;
  --nt-warning: #F59E0B;
  --nt-danger:  #EF4444;
  --nt-info:    #3B82F6;

  /* Typography */
  --nt-font-ar: 'Almarai', 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --nt-font-en: 'Inter', system-ui, -apple-system, sans-serif;
  --nt-font-body: var(--nt-font-ar);
  --nt-font-heading: var(--nt-font-ar);

  /* Font sizes */
  --nt-fs-xs:   12px;
  --nt-fs-sm:   14px;
  --nt-fs-base: 16px;
  --nt-fs-lg:   18px;
  --nt-fs-xl:   20px;
  --nt-fs-2xl:  24px;
  --nt-fs-3xl:  30px;
  --nt-fs-4xl:  36px;
  --nt-fs-5xl:  48px;
  --nt-fs-6xl:  60px;

  /* Weights */
  --nt-fw-regular:  400;
  --nt-fw-medium:   500;
  --nt-fw-semibold: 600;
  --nt-fw-bold:     700;
  --nt-fw-extra:    800;

  /* Spacing — 4px base */
  --nt-sp-1:  4px;
  --nt-sp-2:  8px;
  --nt-sp-3:  12px;
  --nt-sp-4:  16px;
  --nt-sp-5:  20px;
  --nt-sp-6:  24px;
  --nt-sp-8:  32px;
  --nt-sp-10: 40px;
  --nt-sp-12: 48px;
  --nt-sp-16: 64px;
  --nt-sp-20: 80px;
  --nt-sp-24: 96px;

  /* Radii */
  --nt-r-sm:  6px;
  --nt-r-md:  10px;
  --nt-r-lg:  16px;
  --nt-r-xl:  24px;
  --nt-r-2xl: 32px;
  --nt-r-full: 9999px;

  /* Shadows */
  --nt-shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --nt-shadow:    0 4px 12px rgba(15,23,42,.06);
  --nt-shadow-lg: 0 10px 30px rgba(15,23,42,.08);
  --nt-shadow-xl: 0 20px 50px rgba(15,23,42,.12);

  /* Layout */
  --nt-container: 1280px;
  --nt-container-narrow: 960px;
  --nt-header-h: 96px;

  /* Transitions */
  --nt-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nt-t-fast: 150ms var(--nt-ease);
  --nt-t-base: 250ms var(--nt-ease);
  --nt-t-slow: 400ms var(--nt-ease);

  /* Z-index */
  --nt-z-header: 50;
  --nt-z-overlay: 100;
  --nt-z-modal: 200;
  --nt-z-toast: 300;
}