/* ============================================================
   AILA Design System — Giada Theme
   Layout primitives · spacing, radius, border, shadow, icon
   ------------------------------------------------------------
   Base unit: 0.0625rem = 1px; 1rem = 16px. Values stored in
   rem so they scale with user font-size preferences.
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     Spacing
     ------------------------------------------------------------ */
  --spacing-0-5: 0.125rem;   /*  2px */
  --spacing-1:   0.25rem;    /*  4px */
  --spacing-1-5: 0.375rem;   /*  6px */
  --spacing-2:   0.5rem;     /*  8px */
  --spacing-2-5: 0.625rem;   /* 10px */
  --spacing-3:   0.75rem;    /* 12px */
  --spacing-3-5: 0.875rem;   /* 14px */
  --spacing-4:   1rem;       /* 16px */
  --spacing-5:   1.25rem;    /* 20px */
  --spacing-6:   1.5rem;     /* 24px */
  --spacing-7:   1.75rem;    /* 28px */
  --spacing-8:   2rem;       /* 32px */
  --spacing-9:   2.25rem;    /* 36px */
  --spacing-10:  2.5rem;     /* 40px */
  --spacing-11:  2.75rem;    /* 44px */
  --spacing-12:  3rem;       /* 48px */
  --spacing-14:  3.5rem;     /* 56px */
  --spacing-16:  4rem;       /* 64px */
  --spacing-20:  5rem;       /* 80px */
  --spacing-24:  6rem;       /* 96px */
  --spacing-28:  7rem;       /* 112px */
  --spacing-32:  8rem;       /* 128px */
  --spacing-36:  9rem;       /* 144px */
  --spacing-40: 10rem;       /* 160px */

  /* ------------------------------------------------------------
     Rounded (border-radius)
     ------------------------------------------------------------ */
  --rounded-0-5: 0.125rem;   /*  2px */
  --rounded-1:   0.25rem;    /*  4px — default */
  --rounded-1-5: 0.375rem;   /*  6px */
  --rounded-2:   0.5rem;     /*  8px */
  --rounded-2-5: 0.625rem;   /* 10px */
  --rounded-3:   0.75rem;    /* 12px */
  --rounded-4:   1rem;       /* 16px */
  --rounded-5:   1.25rem;    /* 20px */
  --rounded-6:   1.5rem;     /* 24px */
  --rounded-7:   1.75rem;    /* 28px */
  --rounded-8:   2rem;       /* 32px */
  --rounded-full: 999rem;

  /* ------------------------------------------------------------
     Border (width)
     ------------------------------------------------------------ */
  --border-1: 0.0625rem;     /* 1px */
  --border-2: 0.125rem;      /* 2px */
  --border-3: 0.25rem;       /* 4px */
  --border-4: 0.375rem;      /* 6px */
  --border-5: 0.5rem;        /* 8px */
  --border-6: 0.625rem;      /* 10px */
  --border-7: 0.75rem;       /* 12px */
  --border-8: 1rem;          /* 16px */

  /* ------------------------------------------------------------
     Shadow (elevation)
     Uses neutral-950 (#08090E) at low alpha.
     ------------------------------------------------------------ */
  --shadow-xs:  0 0.5px 2px 0 rgba(8, 9, 14, 0.06);
  --shadow-sm:  0 1px 4px 0 rgba(8, 9, 14, 0.06);
  --shadow-md:  0 2px 6px -1px rgba(8, 9, 14, 0.08), 0 2px 6px -1px rgba(8, 9, 14, 0.06);
  --shadow-lg:  0 4px 20px -4px rgba(8, 9, 14, 0.08), 0 4px 6px -2px rgba(8, 9, 14, 0.06);
  --shadow-xl:  0 12px 24px -4px rgba(8, 9, 14, 0.08), 0 4px 8px -4px rgba(8, 9, 14, 0.06);
  --shadow-2xl: 0 20px 40px -6px rgba(8, 9, 14, 0.08), 0 8px 16px -2px rgba(8, 9, 14, 0.06);

  /* ------------------------------------------------------------
     Icon size (lucide)
     4px step. Starts at icon-3 = 12px; no icon-1 or icon-2.
     Button icons: sm → icon-4 (16), md → icon-5 (20), lg → icon-6 (24).
     ------------------------------------------------------------ */
  --icon-3:   0.75rem;       /* 12px */
  --icon-4:   1rem;          /* 16px */
  --icon-5:   1.25rem;       /* 20px */
  --icon-6:   1.5rem;        /* 24px */
  --icon-7:   1.75rem;       /* 28px */
  --icon-8:   2rem;          /* 32px */
  --icon-9:   2.25rem;       /* 36px */
  --icon-10:  2.5rem;        /* 40px */
}