/* ==========================================================================
   un-do DESIGN — Spacing, radii, shadows, layout
   UI style is "sleek": small, restrained radii; outlined cards over shadows.
   ========================================================================== */

:root {
  /* ---- Radii ---- */
  --radius-button: 0.375rem;   /* 6px  */
  --radius-tag: 0.25rem;       /* 4px  */
  --radius-input: 0.375rem;    /* 6px  */
  --radius-badge: 0.375rem;    /* 6px  */
  --radius-card: 0.5rem;       /* 8px  */
  --radius-image: 0.5rem;      /* 8px  */
  --radius-checkbox: 0.125rem; /* 2px  */
  --radius-full: 9999px;       /* pills / circular play button */

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

  /* ---- Spacing scale (4px base) ---- */
  --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-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-18: 4.5rem;  /* 72px */
  --space-24: 6rem;    /* 96px */
  --space-30: 7.5rem;  /* 120px */

  /* ---- Section rhythm — vertical padding per breakpoint ---- */
  --section-py: 4rem;       /* 64px mobile */
  --section-py-md: 6rem;    /* 96px tablet */
  --section-py-lg: 7rem;    /* 112px desktop */

  /* ---- Page gutter ---- */
  --page-gutter: 5%;

  /* ---- 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 max-width */

  /* ---- Shadows — used sparingly; the system favours outlines ---- */
  --shadow-sm: 0 1px 2px 0 var(--color-ink-5);
  --shadow-card: 0 4px 16px -4px var(--color-ink-10);
  --shadow-overlay: 0 12px 32px -8px var(--color-ink-20);

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