/* KNBL Spacing & Layout Tokens */
:root {
  /* Base spacing scale (8px base) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;
  --space-44:  176px;   /* section padding py-44 */

  /* Section padding */
  --section-py-desktop:  var(--space-44);   /* 176px */
  --section-py-mobile:   var(--space-24);   /* 96px */
  --section-px-desktop:  120px;
  --section-px-mobile:   var(--space-6);    /* 24px */

  /* Max widths */
  --max-w-content:  1200px;
  --max-w-wide:     1240px;
  --max-w-full:     1550px;
  --max-w-text:     950px;
  --max-w-prose:    720px;

  /* Border radii */
  --radius-sm:     8px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --radius-xl:     32px;     /* Cards, FAQ, Blog cards */
  --radius-2xl:    40px;     /* Project cards */
  --radius-3xl:    44px;     /* Blog card hover state */
  --radius-full:   9999px;   /* Buttons, tags, pills */

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:    0 20px 40px rgba(0,0,0,0.10);
  --shadow-xl:    0 30px 60px rgba(0,0,0,0.15);
  --shadow-glow:  0 0 60px rgba(79,57,246,0.25);

  /* Z-index scale */
  --z-below:    -1;   /* @kind other */
  --z-base:      0;   /* @kind other */
  --z-raised:   10;   /* @kind other */
  --z-overlay:  20;   /* @kind other */
  --z-nav:      50;   /* @kind other */
  --z-modal:   100;   /* @kind other */

  /* Animation durations */
  --duration-fast:    150ms;   /* @kind other */
  --duration-base:    300ms;   /* @kind other */
  --duration-slow:    500ms;   /* @kind other */
  --duration-slower:  800ms;   /* @kind other */

  /* Animation easings */
  --ease-smooth:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-spring:   cubic-bezier(0.33, 1, 0.68, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);   /* @kind other */
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
}