/* Retell Design System — Spacing, radius, shadow, layout tokens
   Spacing & radius mirror the Figma "Spacing" and "Radius" variable
   collections, expressed in px for direct use. */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---- Corner radius ---- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;    /* default for inputs / buttons */
  --radius-lg: 10px;
  --radius-xl: 12px;   /* cards */
  --radius-2xl: 16px;  /* surfaces / modals */
  --radius-full: 9999px;

  /* ---- Elevation (light mode) ---- */
  --shadow-xs: 0px 1px 2px 0px rgba(0,0,0,0.05);
  --shadow-sm: 0px 1px 2px 0px rgba(31,35,41,0.04), 0px 1px 3px 0px rgba(0,0,0,0.06);
  --shadow-md: 0px 2px 4px -1px rgba(30,31,42,0.04), 0px 4px 8px -2px rgba(0,0,0,0.06);
  --shadow-lg: 0px 4px 8px -2px rgba(31,35,41,0.06), 0px 12px 24px -4px rgba(0,0,0,0.08);
  --shadow-xl: 0px 8px 16px -4px rgba(31,35,41,0.06), 0px 24px 48px -8px rgba(0,0,0,0.10);
  --shadow-focus: 0px 0px 0px 3px var(--electric-blue-100, rgba(62,106,239,0.24));

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-2: 2px;

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-max: 1440px;
}