/* RRA Group — Spacing, radii, elevation
   8px base unit. Generous whitespace is part of the premium feel —
   when unsure, add space. */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px — base */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px — section */
  --space-20: 5rem; /* 80px */
  --space-28: 7rem; /* 112px — large section */

  /* ---- Radii (Relume) ---- */
  --radius-button: 0.75rem; /* 12px */
  --radius-input: 0.75rem; /* 12px */
  --radius-badge: 0.75rem; /* 12px */
  --radius-card: 1rem; /* 16px */
  --radius-image: 1rem; /* 16px */
  --radius-checkbox: 0.25rem; /* 4px */
  --radius-pill: 100px;

  /* ---- Elevation (use sparingly) ---- */
  --shadow-sm: 0 1px 2px rgba(12, 39, 69, 0.06), 0 1px 3px rgba(12, 39, 69, 0.08);
  --shadow-md: 0 4px 12px rgba(12, 39, 69, 0.1);
  --shadow-lg: 0 16px 40px rgba(12, 39, 69, 0.16);

  /* Relume "elevate" button shadow — inset highlight + hairline ring */
  --shadow-elevate: inset 0 -2px 1px 0 var(--color-ink-20),
    inset 0 32px 24px 0 var(--color-white-5),
    inset 0 1px 1px 1px var(--color-white-20),
    inset 0 0 0 1px var(--color-ink-15),
    0 1px 2px 0 var(--color-ink-5);
  --shadow-elevate-hover: inset 0 -2px 1px 0 var(--color-ink-20),
    inset 0 32px 24px 0 var(--color-white-5),
    inset 0 1px 1px 1px var(--color-white-20),
    inset 0 0 0 1px var(--color-ink-15),
    0 2px 4px 0 var(--color-ink-5);

  /* ---- Layout ---- */
  --container-max: 80rem; /* 1280px */
  --container-narrow: 48rem; /* 768px */
  --section-inline: 5%;

  /* ---- 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: 300ms; /* @kind other */
}