/* ============================================================
   SPACING, RADIUS, SHADOW — NuestraCuenta
   Radius derives from the app's --radius: 0.625rem (10px).
   Elevation is deliberately flat: cards use a 1px ring, not a
   drop shadow. Shadows appear only on overlays and the FAB.
   ============================================================ */
:root {
  /* Spacing (4px base) */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px — default card padding / screen gutter */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px — section spacing */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* Radius — base --radius = 0.625rem */
  --radius: 0.625rem;
  --radius-sm:  calc(var(--radius) * 0.6);  /* ~6px  badges-on-rows */
  --radius-md:  calc(var(--radius) * 0.8);  /* ~8px  inputs, list chips */
  --radius-lg:  var(--radius);              /* 10px  buttons */
  --radius-xl:  calc(var(--radius) * 1.4);  /* ~14px cards */
  --radius-2xl: calc(var(--radius) * 1.8);  /* ~18px sheets */
  --radius-pill: 9999px;                    /* badges, FAB, avatars */

  /* Hairline ring used in place of borders on cards */
  --ring-card: 0 0 0 1px oklch(0.145 0 0 / 0.10);

  /* Elevation — used sparingly */
  --shadow-sm: 0 1px 2px oklch(0.145 0 0 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.145 0 0 / 0.10);
  --shadow-lg: 0 10px 28px oklch(0.145 0 0 / 0.14);
  --shadow-fab: 0 6px 16px oklch(0.205 0.09 264 / 0.30);  /* blue glow under FAB */

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-base: 180ms;  /* @kind other */

  /* Layout */
  --app-max-width: 42rem;   /* max-w-2xl — the mobile column */
  --header-height: 3.25rem;
  --nav-height: 3.5rem;
}