/* Rime Finance — Spacing, radii, borders, shadows, grid
   The whole system snaps to a 60px module (the visible pixel grid). Cards use a
   4px radius; interactive elements (buttons, marks, icon boxes) use 2px. Borders
   are hairlines — a 0.5px inset + 0.5px outset ring reading as a crisp 1px line. */

:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 30px;
  --space-7: 44px;
  --space-8: 60px;
  --space-9: 120px;

  /* The pixel-grid module */
  --grid-module: 60px;

  /* Radii */
  --radius-control: 2px;   /* buttons, marks, icon boxes, pixels */
  --radius-card: 4px;      /* cards, tags, panels, inputs */
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --hairline: 0.5px solid var(--border-hairline);

  /* Hairline ring — Rime's signature crisp edge (inset + outset 0.5px) */
  --ring-hairline: inset 0 0 0 0.5px var(--border-hairline), 0 0 0 0.5px var(--border-hairline);

  /* Control / mark sizes */
  --control-h: 44px;       /* button & mark height */
  --mark-size: 44px;       /* icon-box square */
  --row-h: 60px;           /* nav / list row */

  /* Shadows — extremely restrained */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Layout */
  --page-margin: 120px;    /* desktop gutter on a 1440 canvas */
  --content-max: 1200px;
}