/* ============================================================
   ENVOX Intelligence — Spacing, Radius & Shadow Tokens
   ============================================================ */

:root {
  /* =========================================
     SPACING SCALE (4px base unit)
  ========================================= */
  --space-0:   0;
  --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 */

  /* =========================================
     BORDER RADIUS
  ========================================= */
  --radius-sm:   0.25rem;    /*  4px — small badges, pills */
  --radius-md:   0.375rem;   /*  6px — small elements       */
  --radius-lg:   0.5rem;     /*  8px — buttons, inputs      */
  --radius-xl:   0.75rem;    /* 12px — cards (primary)      */
  --radius-2xl:  1rem;       /* 16px — login modal, logo    */
  --radius-full: 9999px;     /* full — pill badges, avatars */

  /* =========================================
     SHADOWS
  ========================================= */
  --shadow-xs:         0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-sm:         0 1px 3px 0 rgba(0,0,0,0.07),
                       0 1px 2px -1px rgba(0,0,0,0.07);   /* card default */
  --shadow-md:         0 4px 6px -1px rgba(0,0,0,0.10),
                       0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg:         0 10px 15px -3px rgba(0,0,0,0.10),
                       0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-xl:         0 20px 25px -5px rgba(0,0,0,0.10),
                       0 8px 10px -6px rgba(0,0,0,0.10);
  --shadow-card-hover: 0 10px 25px rgba(0,0,0,0.15);      /* card hover */
  --shadow-sidebar:    4px 0 24px rgba(0,0,0,0.18);       /* sidebar right */
  --shadow-modal:      0 25px 50px rgba(0,0,0,0.25);      /* login overlay */
  --shadow-focus-ring: 0 0 0 3px rgba(37,99,235,0.25);    /* focus ring */

  /* =========================================
     LAYOUT
  ========================================= */
  --sidebar-width:  16rem;              /* 256px / w-64 */
  --header-height:  4rem;               /* 64px */
  --content-gutter: var(--space-8);     /* 32px */

  /* =========================================
     TRANSITIONS
  ========================================= */
  --transition-fast:    0.15s ease;    /* @kind other */
  --transition-default: 0.2s ease;     /* @kind other */
  --transition-slow:    0.4s ease;     /* @kind other */

  /* =========================================
     ANIMATION KEYFRAMES (reference names)
     Defined in consuming HTML via <style>:
       @keyframes fadeInUp { ... }
       @keyframes spin      { ... }
  ========================================= */
  --anim-fade-in-up-duration: 0.4s;   /* @kind other */
  --anim-spin-duration:       0.8s;   /* @kind other */
}