/* ============================================================
   Envisage Technology Zambia — CSS Custom Properties
   ============================================================ */

:root {
  /* Brand colours */
  --clr-primary:       #0078d4;
  --clr-primary-dark:  #005fa3;
  --clr-primary-light: #e6f2fc;
  --clr-accent:        #FF6B35;
  --clr-accent-dark:   #e05520;
  --clr-accent-light:  #fff0eb;

  /* Neutrals */
  --clr-dark:          #0D1117;
  --clr-dark-2:        #1a222e;
  --clr-dark-3:        #2d3748;
  --clr-mid:           #64748b;
  --clr-light:         #94a3b8;
  --clr-border:        #e2e8f0;
  --clr-bg:            #F8FAFC;
  --clr-white:         #ffffff;

  /* Semantic */
  --clr-success:       #22c55e;
  --clr-error:         #ef4444;
  --clr-warning:       #f59e0b;

  /* Typography */
  --font-sans:         'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:      0.75rem;    /* 12px */
  --font-size-sm:      0.875rem;   /* 14px */
  --font-size-base:    1rem;       /* 16px */
  --font-size-lg:      1.125rem;   /* 18px */
  --font-size-xl:      1.25rem;    /* 20px */
  --font-size-2xl:     1.5rem;     /* 24px */
  --font-size-3xl:     1.875rem;   /* 30px */
  --font-size-4xl:     2.25rem;    /* 36px */
  --font-size-5xl:     3rem;       /* 48px */
  --font-size-6xl:     3.75rem;    /* 60px */

  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  --line-height-tight:   1.2;
  --line-height-snug:    1.4;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.8;

  /* Spacing scale (4px base) */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.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;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:   0 24px 48px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-blue: 0 8px 24px rgba(0,120,212,0.25);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --container-max:     1200px;
  --container-pad:     var(--space-6);
  --nav-height:        80px;
  --nav-height-scroll: 60px;

  /* Z-index layers */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}