/* =============================================================================
   ZENZAS DESIGN TOKENS
   All design decisions as CSS custom properties.
   Spec: Part 3 — Design System & UI Guidelines
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     COLOUR PALETTE
  --------------------------------------------------------------------------- */

  /* Brand primaries */
  --color-primary:        #2563EB;   /* blue-600 */
  --color-primary-hover:  #1D4ED8;   /* blue-700 */
  --color-primary-light:  #EFF6FF;   /* blue-50  */
  --color-primary-ring:   rgba(37, 99, 235, 0.25);

  /* Brand secondary */
  --color-secondary:       #6D28D9;  /* violet-700 */
  --color-secondary-hover: #5B21B6;  /* violet-800 */
  --color-secondary-light: #F5F3FF;  /* violet-50  */

  /* Accent */
  --color-accent:       #06B6D4;     /* cyan-500 */
  --color-accent-hover: #0891B2;     /* cyan-600 */
  --color-accent-light: #ECFEFF;     /* cyan-50  */

  /* Text */
  --color-heading: #0F172A;          /* slate-900 */
  --color-body:    #475569;          /* slate-600 */
  --color-muted:   #94A3B8;          /* slate-400 */
  --color-subtle:  #CBD5E1;          /* slate-300 */

  /* Backgrounds */
  --color-bg:          #FFFFFF;
  --color-bg-secondary:#F8FAFC;      /* slate-50  */
  --color-bg-tertiary: #F1F5F9;      /* slate-100 */

  /* Dark surfaces (hero, footer) */
  --color-dark:          #0F172A;    /* slate-900  */
  --color-dark-surface:  #1E293B;    /* slate-800  */
  --color-dark-accent:   #1E1B4B;    /* indigo-950 */
  --color-dark-card:     rgba(255, 255, 255, 0.05);
  --color-dark-border:   rgba(255, 255, 255, 0.10);
  --color-dark-text:     #E2E8F0;    /* slate-200  */
  --color-dark-muted:    #94A3B8;    /* slate-400  */

  /* Border */
  --color-border:       #E2E8F0;     /* slate-200 */
  --color-border-focus: #2563EB;

  /* Status */
  --color-success:      #10B981;     /* emerald-500 */
  --color-success-bg:   #ECFDF5;
  --color-warning:      #F59E0B;     /* amber-500  */
  --color-warning-bg:   #FFFBEB;
  --color-error:        #EF4444;     /* red-500    */
  --color-error-bg:     #FEF2F2;
  --color-info:         #3B82F6;     /* blue-500   */
  --color-info-bg:      #EFF6FF;

  /* ---------------------------------------------------------------------------
     GRADIENTS
  --------------------------------------------------------------------------- */

  --gradient-hero:       linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%);
  --gradient-brand:      linear-gradient(135deg, #2563EB, #6D28D9);
  --gradient-brand-h:    linear-gradient(90deg,  #2563EB, #6D28D9);
  --gradient-accent:     linear-gradient(135deg, #6D28D9, #06B6D4);
  --gradient-blue-cyan:  linear-gradient(135deg, #2563EB, #06B6D4);
  --gradient-badge:      linear-gradient(90deg,  #3B82F6, #8B5CF6);
  --gradient-text:       linear-gradient(135deg, #2563EB, #6D28D9);

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
  --------------------------------------------------------------------------- */

  /* Font families */
  --font-latin:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-arabic:  'Noto Sans Arabic', 'Arabic Typesetting', 'Traditional Arabic', sans-serif;

  /* Font weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Font sizes */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-md:   1.0625rem;  /*  17px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */
  --text-7xl:  4.5rem;     /*  72px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ---------------------------------------------------------------------------
     SPACING SCALE (4px base)
  --------------------------------------------------------------------------- */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-30: 7.5rem;    /* 120px */
  --space-40: 10rem;     /* 160px */

  /* ---------------------------------------------------------------------------
     LAYOUT
  --------------------------------------------------------------------------- */

  --container-max:    1280px;
  --container-wide:   1320px;
  --header-height:    72px;
  --header-height-sm: 64px;

  /* Section padding */
  --section-py:     var(--space-24);   /* 96px desktop */
  --section-py-sm:  var(--space-16);   /* 64px tablet  */
  --section-py-xs:  var(--space-12);   /* 48px mobile  */

  /* Container padding */
  --container-px:     var(--space-20); /* 80px desktop */
  --container-px-sm:  var(--space-10); /* 40px tablet  */
  --container-px-xs:  var(--space-5);  /* 20px mobile  */

  /* ---------------------------------------------------------------------------
     BORDER RADIUS
  --------------------------------------------------------------------------- */

  --radius-sm:   0.375rem;  /*  6px */
  --radius-md:   0.5rem;    /*  8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.25rem;   /* 20px */
  --radius-3xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ---------------------------------------------------------------------------
     SHADOWS
  --------------------------------------------------------------------------- */

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 4px 8px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.10);

  --shadow-glow-blue:   0 0 40px rgba(37, 99, 235, 0.20);
  --shadow-glow-violet: 0 0 40px rgba(109, 40, 217, 0.20);
  --shadow-glow-cyan:   0 0 40px rgba(6, 182, 212, 0.20);

  --shadow-dark:   0 4px 32px rgba(0, 0, 0, 0.40);
  --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ---------------------------------------------------------------------------
     TRANSITIONS & ANIMATIONS
  --------------------------------------------------------------------------- */

  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --transition-base:       all var(--duration-normal) var(--ease-in-out);
  --transition-fast:       all var(--duration-fast) var(--ease-in-out);
  --transition-color:      color var(--duration-normal) var(--ease-in-out),
                           background-color var(--duration-normal) var(--ease-in-out),
                           border-color var(--duration-normal) var(--ease-in-out);
  --transition-transform:  transform var(--duration-normal) var(--ease-out);

  /* ---------------------------------------------------------------------------
     Z-INDEX SCALE
  --------------------------------------------------------------------------- */

  --z-base:      0;
  --z-above:     10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* ---------------------------------------------------------------------------
     FOCUS RING
  --------------------------------------------------------------------------- */

  --focus-ring: 0 0 0 3px var(--color-primary-ring);
}