/* ============================================================
   KUARS – Design Tokens
   All colors, spacing, typography and shadows in one place.
   ============================================================ */
:root {
  /* Brand Colors */
  --color-purple:       #7c3aed;
  --color-purple-dark:  #6d28d9;
  --color-purple-light: #a855f7;
  --color-orange:       #f97316;
  --color-orange-dark:  #ea6c0a;

  /* Hero Gradient */
  --hero-start: #06b6d4;
  --hero-mid:   #3b82f6;
  --hero-end:   #6366f1;

  /* Neutrals */
  --color-dark:   #1e1b4b;
  --color-text:   #374151;
  --color-muted:  #6b7280;
  --color-light:  #f9fafb;
  --color-white:  #ffffff;
  --color-border: #e5e7eb;

  /* Pastel Card Backgrounds */
  --c-lav:    #ede9fe;
  --c-cyan:   #cffafe;
  --c-yellow: #fef9c3;
  --c-green:  #dcfce7;
  --c-pink:   #fce7f3;
  --c-orange: #ffedd5;

  /* Typography */
  --font-base: 'Plus Jakarta Sans', sans-serif;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Font Sizes (fluid clamp where needed) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.05rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;

  /* Spacing — 8pt scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Border Radius */
  --r-sm:   0.5rem;
  --r-md:   0.75rem;
  --r-lg:   1rem;
  --r-xl:   1.25rem;
  --r-2xl:  1.5rem;
  --r-full: 9999px;

  /* Shadows */
  --sh-sm:   0 1px 3px rgba(0,0,0,.08);
  --sh-md:   0 4px 16px rgba(0,0,0,.08);
  --sh-lg:   0 16px 40px rgba(0,0,0,.1);
  --sh-xl:   0 24px 64px rgba(0,0,0,.12);
  --sh-card: 0 28px 70px rgba(0,0,0,.2);

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

  /* Z-index */
  --z-base:    0;
  --z-drop:  100;
  --z-sticky:200;
  --z-modal: 300;
  --z-toast: 400;

  /* Layout */
  --container-max: 1100px;
  --container-pad: 6%;
}