/* ============================================================
   NICE – Design Tokens
   All CSS custom properties live here.
   Load this BEFORE main.css via a separate <link> tag.
   ============================================================ */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-dark:     #231F20;   /* background base              */
  --color-lavender: #B6A1CD;   /* primary accent               */
  --color-yellow:   #FDDC0D;   /* rare accent – use sparingly  */

  /* Derived / alpha variants */
  --color-lavender-20: rgba(182, 161, 205, 0.20);
  --color-lavender-40: rgba(182, 161, 205, 0.40);
  --color-yellow-10:   rgba(253, 220, 13,  0.10);

  /* ── Typography ─────────────────────────────────────────── */
  --font-mono: 'JetBrains Mono', monospace;

  --text-xs:   0.625rem;   /*  10px */
  --text-sm:   0.75rem;    /*  12px */
  --text-base: 0.875rem;   /*  14px */
  --text-md:   1rem;       /*  16px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  2rem;       /*  32px */
  --text-3xl:  3rem;       /*  48px */

  --font-regular: 400;
  --font-medium:  500;
  --font-bold:    700;

  --leading-tight:   1.1;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── Spacing (8px base grid) ─────────────────────────────── */
  --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  */

  /* ── Layout ─────────────────────────────────────────────── */
  --viewport-min: 375px;   /* mobile base */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-pill:  999px;

  /* ── Motion ─────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index layers ──────────────────────────────────────── */
  --z-base:    0;
  --z-panel:   10;
  --z-overlay: 20;
  --z-nav:     30;
  --z-modal:   40;
  --z-toast:   50;
}