/* ============================================================
   Radii, Borders, Transitions, Z-Index, Breakpoints, Sizes
   Yaz Design System v1.0
   ============================================================ */

:root {
  /* ── Border Radius ── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Borders ── */
  --border-width-none: 0;
  --border-width-thin: 1px;
  --border-width-md: 2px;
  --border-width-thick: 4px;

  /* ── Transitions ── */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-max: 9999;

  /* ── Breakpoints (for reference — use in media queries) ── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* ── Container Widths ── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* ── Sizes ── */
  --size-avatar-sm: 24px;
  --size-avatar-md: 36px;
  --size-avatar-lg: 48px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-input-sm: 32px;
  --size-input-md: 40px;
  --size-input-lg: 48px;
  --size-button-sm: 32px;
  --size-button-md: 40px;
  --size-button-lg: 48px;
}