/* ============================================================
   MIMIC — Spacing, radius, border & shadow tokens
   The system is built from 1px white outlines on a black
   canvas. Corners are predominantly SHARP (0px); rounding is
   reserved for the active nav tile and a few capsules. There
   are essentially no drop shadows — depth comes from outline
   and fill, not blur.
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius ---- */
  --radius-none: 0;       /* the default — sharp boxed outlines */
  --radius-sm: 4px;       /* small chips, album thumbnails */
  --radius-md: 10px;      /* active nav tile, card stack */
  --radius-pill: 999px;   /* mastery dots, capsule toggles, ">" chips */

  /* ---- Borders ---- */
  --border-hair: 0.5px solid var(--white);
  --border-1: 1px solid var(--white);
  --border-1-faint: 1px solid var(--fg-faint);
  --border-1-subtle: 1px solid var(--fg-subtle);
  --border-danger: 1px solid var(--danger);

  /* The signature look: a crisp inset 1px white outline. */
  --outline-card: inset 0 0 0 1px var(--white);
  --outline-card-faint: inset 0 0 0 1px var(--fg-subtle);

  /* ---- Shadows (used sparingly; the system is essentially flat) ---- */
  --shadow-none: none;
  --shadow-tile: 0 2px 0 0 rgba(0, 0, 0, 0.6); /* pressed/raised nav tile */

  /* ---- Mobile frame ---- */
  --app-width: 430px;     /* iPhone 14 Pro Max design width */
  --hit-min: 44px;        /* minimum touch target */
}