/* ============================================================
   SPACING, RADII, CONTAINERS, SHADOW — Relume Prompt
   ============================================================ */

:root {
  /* ---- Spacing scale (rem) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-30: 7.5rem;

  /* ---- Section rhythm (vertical padding used across page sections) ---- */
  --section-padding-y: clamp(4rem, 2.5rem + 6vw, 7rem);  /* 64 → 112 */
  --section-padding-x: 5%;

  /* ---- Radii ---- */
  --radius-button: 0.75rem;   /* 12px */
  --radius-tag: 0.75rem;      /* badge */
  --radius-input: 0.75rem;
  --radius-checkbox: 0.25rem;
  --radius-card: 1rem;        /* 16px */
  --radius-image: 1rem;       /* 16px */
  --radius-full: 9999px;

  /* ---- Border widths ---- */
  --border-width: 1px;

  /* ---- Container widths ---- */
  --container-xxs: 20rem;
  --container-xs: 25rem;
  --container-sm: 30rem;
  --container-md: 35rem;
  --container-lg: 48rem;
  --container-xl: 64rem;
  --container-xxl: 80rem;  /* default page container */

  /* ---- Breakpoints (reference values) ---- */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;

  /* ---- Shadows — the system is essentially flat / outlined.
         A single whisper-soft elevation is available for overlays. ---- */
  --shadow-none: none;
  --shadow-soft: 0 1px 2px rgba(6, 3, 12, 0.04), 0 4px 16px rgba(6, 3, 12, 0.06);
  --shadow-overlay: 0 8px 40px rgba(6, 3, 12, 0.12);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 200ms; /* @kind other */
  --duration-base: 300ms; /* @kind other */
}