/* =====================================================
   SABAH SCRIPT — Design Tokens & CSS Variables
   Theme: Fresh Green Light
   ===================================================== */

:root {
  /* ── Brand Colors ── */
  --color-primary-50:  #f0fdf4;
  --color-primary-100: #dcfce7;
  --color-primary-200: #bbf7d0;
  --color-primary-300: #86efac;
  --color-primary-400: #4ade80;
  --color-primary-500: #22c55e;
  --color-primary-600: #16a34a;
  --color-primary-700: #15803d;
  --color-primary-800: #166534;
  --color-primary-900: #14532d;

  /* ── Semantic Colors ── */
  --color-success:        #22c55e;
  --color-success-light:  #dcfce7;
  --color-success-dark:   #15803d;
  --color-error:          #ef4444;
  --color-error-light:    #fee2e2;
  --color-error-dark:     #b91c1c;
  --color-warning:        #f59e0b;
  --color-warning-light:  #fef3c7;
  --color-info:           #3b82f6;
  --color-info-light:     #dbeafe;

  /* ── Neutrals ── */
  --color-white:    #ffffff;
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ── Surfaces ── */
  --surface-bg:        #f8fafc;
  --surface-card:      #ffffff;
  --surface-header:    #ffffff;
  --surface-footer:    #ffffff;
  --surface-overlay:   rgba(0,0,0,.45);

  /* ── Typography ── */
  --font-primary: 'Vazirmatn', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Courier New', monospace;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.75;

  /* ── Spacing ── */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── Border Radius ── */
  --radius-sm:   .375rem;
  --radius-md:   .5rem;
  --radius-lg:   .75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,.1),  0 8px 10px rgba(0,0,0,.06);
  --shadow-card:0 2px 20px rgba(34,197,94,.08), 0 1px 6px rgba(0,0,0,.05);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(.34,1.56,.64,1);

  /* ── Layout ── */
  --header-height:  64px;
  --footer-height:  56px;
  --sidebar-width:  260px;
  --content-max:    1200px;

  /* ── Z-index ── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}