/* ============================================
   DESIGN TOKENS - Nokhba Design System v2.0
   ============================================ */

:root {
  /* ─── Color Palette ─── */
  --color-navy:         #1B2B6B;
  --color-navy-2:       #152258;
  --color-navy-3:       #0B1D3A;
  --color-navy-dark:    #07111F;
  --color-gold:         #C9A84C;
  --color-gold-light:   #E2C06A;
  --color-gold-dark:    #8B6A14;
  --color-gold-deep:    #6B4A00;
  --color-cream:        #F8F4ED;
  --color-cream-2:      #EDE7D9;
  --color-white:        #FFFFFF;
  --color-gray:         #6B7280;
  --color-gray-2:       #9CA3AF;
  --color-light:        #F1F5F9;
  --color-light-2:      #E5E7EB;
  --color-success:      #10B981;
  --color-warning:      #F59E0B;
  --color-error:        #EF4444;

  /* ─── Color Alias ─── */
  --clr-body:           var(--color-navy);
  --clr-body-inverse:   var(--color-white);
  --clr-heading:        var(--color-navy);
  --clr-text:           var(--color-gray);
  --clr-text-muted:     rgba(255, 255, 255, .45);
  --clr-border:         var(--color-cream-2);
  --clr-bg-section:     var(--color-light);
  --clr-bg-card:        var(--color-white);
  --clr-overlay:        rgba(255, 255, 255, .05);
  --clr-gold-border:    rgba(200, 150, 42, .2);
  --clr-gold-border-hover: rgba(200, 150, 42, .35);
  --clr-white-soft:     rgba(255, 255, 255, .65);
  --clr-white-faint:    rgba(255, 255, 255, .08);
  --clr-white-divider:  rgba(255, 255, 255, .1);

  /* ─── Gradients ─── */
  --grad-gold:          linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  --grad-gold-rev:      linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  --grad-gold-dark:     linear-gradient(135deg, var(--color-gold-dark), var(--color-gold-deep));
  --grad-navy:          linear-gradient(135deg, var(--color-navy), var(--color-navy-2));
  --grad-navy-hero:     linear-gradient(135deg, var(--color-navy) 0%, #0D2555 50%, var(--color-navy-3) 100%);
  --grad-icon:          linear-gradient(135deg, rgba(200, 150, 42, .1), rgba(200, 150, 42, .05));
  --grad-author:        linear-gradient(135deg, var(--color-navy), var(--color-gold-dark));
  --grad-program-green: linear-gradient(135deg, #1A3A2E, #0D2B1F);
  --grad-program-brown: linear-gradient(135deg, #2D1B00, #4A2E00);

  /* ─── Typography ─── */
  --font-primary:       'Tajawal', sans-serif;
  --font-heading:       var(--font-primary);

  --text-xs:        .75rem;
  --text-sm:        .875rem;
  --text-base:      1rem;
  --text-body:      1rem;
  --text-lg:        1.125rem;
  --text-xl:        1.25rem;
  --text-2xl:       1.5rem;
  --text-3xl:       1.875rem;
  --text-4xl:       2.25rem;
  --text-5xl:       3rem;
  --text-hero:      clamp(2.5rem, 5vw, 4rem);
  --text-title:     clamp(1.75rem, 3vw, 2.5rem);
  --text-cta:       clamp(1.75rem, 4vw, 3rem);

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  --lh-tight:   1.25;
  --lh-normal:  1.4;
  --lh-loose:   1.6;
  --lh-spread:  1.75;
  --lh-wide:    1.85;

  /* ─── Spacing Scale (4px base) ─── */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-22: 5.5rem;

  /* ─── Border Radius ─── */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 14px;
  --radius-3xl: 20px;
  --radius-full: 50px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 2px 20px rgba(11, 29, 58, .08);
  --shadow-md:  0 15px 40px rgba(11, 29, 58, .08);
  --shadow-lg:  0 20px 50px rgba(11, 29, 58, .1);
  --shadow-gold-sm:  0 3px 12px rgba(200, 150, 42, .3);
  --shadow-gold-md:  0 4px 20px rgba(200, 150, 42, .35);
  --shadow-gold-hover:  0 6px 20px rgba(200, 150, 42, .4);
  --shadow-gold-hover-md: 0 8px 30px rgba(200, 150, 42, .45);
  --shadow-cta:    0 4px 20px rgba(0, 0, 0, .2);
  --shadow-cta-hover: 0 8px 30px rgba(0, 0, 0, .3);

  /* ─── Transitions ─── */
  --transition-fast:   .2s ease;
  --transition-base:   .25s ease;
  --transition-slow:   .35s ease;
  --transition-reveal: .7s ease;

  /* ─── Z-Index Scale ─── */
  --z-nav:    200;
  --z-hero:   2;
  --z-overlay: 300;
  --z-modal:  400;

  /* ─── Layout ─── */
  --container-max: 1200px;
  --container-pad: 3rem;
  --container-pad-md: 1.5rem;
  --container-pad-sm: 1rem;
  --section-py: 5rem;
  --section-py-md: 4rem;
  --section-py-sm: 3rem;
  --grid-gap: 1.5rem;

  /* ─── Hero ─── */
  --hero-min-height: 92vh;
}