/* ============================================================
   SPACING, RADII, SHADOWS  —  Buddy Design System
   ------------------------------------------------------------
   Spacing scale per the studio design guidance:
   4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.
   Radii: small for controls, medium for inputs, larger for
   cards only where warranted. Pointy panels run tighter radii.
   ============================================================ */

:root {
  /* ---------- Spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Corner radii ---------- */
  --radius-control: 8px;   /* buttons, pills, small controls */
  --radius-input: 10px;    /* text fields, segmented controls */
  --radius-card: 16px;     /* cards, sheets, grouped sections */
  --radius-card-lg: 22px;  /* large modal sheets / hero cards */
  --radius-pill: 999px;    /* capsules */
  --radius-pointy-panel: 14px;  /* Pointy instrument panels (guide: radius-lg cards) */
  --radius-pointy-cell: 10px;   /* Pointy telemetry cells (guide: radius-md) */

  /* ---------- Hit targets ---------- */
  --hit-target: 44px;      /* minimum tappable size (HIG) */

  /* ---------- Borders / hairlines ---------- */
  --border-hairline: 0.5px;  /* iOS 1px @2x separators */
  --border-regular: 1px;

  /* ---------- Elevation / shadows ----------
     iOS leans on materials over heavy shadows. Cards use a
     soft low shadow; sheets/popovers a deeper one. Pointy
     frosted surfaces use a darker drop. */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08),
                 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.10),
                   0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-sheet: 0 -2px 20px rgba(0, 0, 0, 0.12);
  --shadow-pointy: 0 14px 28px rgba(0, 0, 0, 0.35);

  /* ---------- Material blur (Liquid Glass / vibrancy) ----------
     iOS 26 leans on translucent material. Approximate with
     backdrop-filter blur + a tint. */
  --material-blur: saturate(180%) blur(20px); /* @kind other */
  --material-tint-light: rgba(255, 255, 255, 0.72);
  --material-tint-dark: rgba(30, 30, 32, 0.62);
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.55);
  }
}