/* ========================================
   LOKENGO – Design Tokens & CSS Variables
   ======================================== */

:root {
  /* ---- Colors ---- */
  --clr-primary:       #4E61E9;
  --clr-primary-dark:  #3A4BD4;
  --clr-primary-light: #ECEEF8;
  --clr-secondary:     #0DB07B;
  --clr-secondary-dark:#0A9468;
  --clr-secondary-light:#E6F7F1;
  --clr-dark:          #0D1B2A;
  --clr-dark-soft:     #1B2A3D;
  --clr-text:          #2D3748;
  --clr-text-light:    #718096;
  --clr-text-muted:    #A0AEC0;
  --clr-light:         #F8FAFB;
  --clr-white:         #FFFFFF;
  --clr-border:        #E2E8F0;
  --clr-danger:        #E53E3E;
  --clr-warning:       #ED8936;
  --clr-success:       #38A169;

  /* ---- Gradients ---- */
  --gradient-primary:  linear-gradient(135deg, #4E61E9, #0DB07B);
  --gradient-hero:     linear-gradient(135deg, #0D1B2A 0%, #1A2D50 50%, #0D1B2A 100%);
  --gradient-overlay:  linear-gradient(180deg, rgba(13,27,42,0.7) 0%, rgba(13,27,42,0.9) 100%);
  --gradient-card:     linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);

  /* ---- Typography ---- */
  --ff-primary:   'Poppins', sans-serif;
  --ff-secondary: 'Open Sans', sans-serif;

  --fs-display:  clamp(2.5rem, 5vw, 4rem);
  --fs-h1:       clamp(2rem, 4vw, 3rem);
  --fs-h2:       clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:       clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h4:       clamp(1.1rem, 2vw, 1.35rem);
  --fs-body:     1rem;
  --fs-body-lg:  1.125rem;
  --fs-small:    0.875rem;
  --fs-xs:       0.75rem;

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

  --lh-tight:    1.2;
  --lh-normal:   1.6;
  --lh-relaxed:  1.8;

  /* ---- Spacing ---- */
  --sp-xs:   0.25rem;
  --sp-sm:   0.5rem;
  --sp-md:   1rem;
  --sp-lg:   1.5rem;
  --sp-xl:   2rem;
  --sp-2xl:  3rem;
  --sp-3xl:  4rem;
  --sp-4xl:  6rem;
  --sp-5xl:  8rem;

  --section-pad-y:  clamp(4rem, 8vw, 7rem);
  --section-pad-x:  clamp(1rem, 5vw, 2rem);
  --container-max:  1280px;
  --container-narrow: 960px;

  /* ---- Border Radius ---- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 50%;
  --radius-pill: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.16);
  --shadow-glow: 0 0 30px rgba(78,97,233,0.3);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.12);

  /* ---- Transitions ---- */
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

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