/* ============================================
   LET'S SKILL INDIA FOUNDATION — DESIGN TOKENS
   ============================================ */

:root {
  /* ── Color Palette ── */
  --color-primary-deep:    #0A2540;
  --color-primary-accent:  #00D4AA;
  --color-warm-coral:      #FF6B6B;
  --color-electric-blue:   #4F8CFF;
  --color-soft-lavender:   #B8B3FF;
  --color-pure-white:      #FFFFFF;
  --color-warm-cream:      #FFF8F0;
  --color-deep-navy:       #061A2D;

  /* Derived / UI Colors */
  --color-text-primary:    #0A2540;
  --color-text-secondary:  #4A5568;
  --color-text-muted:      #718096;
  --color-text-on-dark:    #E2E8F0;
  --color-text-white:      #FFFFFF;
  --color-border:          #E2E8F0;
  --color-border-light:    #F0F0F5;
  --color-bg-glass:        rgba(255, 255, 255, 0.08);
  --color-bg-glass-light:  rgba(255, 255, 255, 0.72);
  --color-overlay:         rgba(6, 26, 45, 0.6);

  /* Accent Glows */
  --glow-accent:           0 0 20px rgba(0, 212, 170, 0.35);
  --glow-coral:            0 0 20px rgba(255, 107, 107, 0.35);
  --glow-blue:             0 0 20px rgba(79, 140, 255, 0.35);

  /* ── Typography ── */
  --font-heading:          'Inter', system-ui, -apple-system, sans-serif;
  --font-body:             'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:             'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes (fluid) */
  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.875rem;    /* 14px */
  --text-base:  1rem;        /* 16px */
  --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:   4rem;        /* 64px */

  /* Line Heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Font Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ── Spacing ── */
  --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-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Section Padding ── */
  --section-py:  var(--space-20);
  --section-px:  var(--space-6);

  /* ── Container ── */
  --container-max:  1280px;
  --container-sm:   960px;

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

  /* ── Shadows ── */
  --shadow-sm:    0 1px 3px rgba(10, 37, 64, 0.06), 0 1px 2px rgba(10, 37, 64, 0.04);
  --shadow-md:    0 4px 6px rgba(10, 37, 64, 0.05), 0 2px 4px rgba(10, 37, 64, 0.04);
  --shadow-lg:    0 10px 25px rgba(10, 37, 64, 0.08), 0 4px 10px rgba(10, 37, 64, 0.04);
  --shadow-xl:    0 20px 50px rgba(10, 37, 64, 0.12), 0 8px 20px rgba(10, 37, 64, 0.06);
  --shadow-2xl:   0 25px 60px rgba(10, 37, 64, 0.18);
  --shadow-card:  0 4px 24px rgba(10, 37, 64, 0.08);
  --shadow-card-hover: 0 12px 40px rgba(10, 37, 64, 0.15);

  /* ── Transitions ── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  700ms;

  --transition-base:  all var(--duration-normal) var(--ease-out);
  --transition-fast:  all var(--duration-fast) var(--ease-out);
  --transition-slow:  all var(--duration-slow) var(--ease-out);

  /* ── Z-Index Layers ── */
  --z-behind:     -1;
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-cursor:     9999;

  /* ── Navbar ── */
  --nav-height:   80px;
  --nav-height-shrunk: 64px;
}