/* ==========================================================================
   Exigo Elements — Effects Tokens
   Radii, shadows, motion, z-index. The redesign is intentionally soft and
   quiet: pill buttons, gently rounded panels, whisper-light shadows, and one
   consistent 300ms ease on almost everything.
   ========================================================================== */

:root {
  /* ---- Corner radii --------------------------------------------------- */
  --radius-xs: 0.25rem;     /*  4px — chips, small pills, checkbox */
  --radius-sm: 0.5rem;      /*  8px — cards, panels, dropdowns, small buttons */
  --radius-md: 0.75rem;     /* 12px — larger surfaces */
  --radius-lg: 1rem;        /* 16px — modals */
  --radius-pill: 1.5rem;    /* 24px — primary/secondary action buttons */
  --radius-round: 50%;      /* avatars, icon toggles */

  /* ---- Shadows -------------------------------------------------------- */
  /* The redesign uses one soft elevation for floating surfaces. */
  --shadow-none: none;
  --shadow-sm: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  --shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);   /* dropdowns, floating buttons */
  --shadow-lg: 0px 8px 24px 0px rgba(0, 0, 0, 0.12);  /* modals, popovers */
  --shadow-focus: 0 0 0 3px var(--Primary-Denim-50);  /* keyboard focus ring */

  /* ---- Motion --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 300ms; /* @kind other */ /* the app's default transition */
  --duration-slow: 400ms; /* @kind other */ /* menu open/close, chevron rotation */
  --transition-base: all var(--duration-base) var(--ease-standard); /* @kind other */
  --transition-color: color var(--duration-base) var(--ease-standard),
                      background var(--duration-base) var(--ease-standard),
                      border-color var(--duration-base) var(--ease-standard);

  /* ---- Borders -------------------------------------------------------- */
  --border-width: 1px; /* @kind other */
  --border-thick: 2px; /* @kind other */

  /* ---- Z-index ladder ------------------------------------------------- */
  --z-rail: 980; /* @kind other */
  --z-dropdown: 1000; /* @kind other */
  --z-screencover: 1020; /* @kind other */ /* dim backdrop behind modals */
  --z-modal: 1030; /* @kind other */
  --z-toast: 1080; /* @kind other */
}