/* ============================================================
   Cocoa — borders, radii & shadows
   The whole look is built from three moves:
     1. a thick ink border (2 or 3px, hard, square)
     2. a hard offset shadow directly below (no blur, ever)
     3. a 50%-white highlight stripe along the top inner edge
   No radius. No gradients. No soft/blurred shadows.
   ============================================================ */

:root {
  /* ---- Radius — always zero. Pixel corners are sharp. ---- */
  --radius: 0;

  /* ---- Border widths ---- */
  --border-1: 2px;   /* cards, inputs, icon buttons, meters, tape icons */
  --border-2: 3px;   /* panels, primary buttons, window shell, title bar */

  --border-color: var(--ink-dark);
  --border-thin: var(--border-1) solid var(--border-color);
  --border-thick: var(--border-2) solid var(--border-color);

  /* ---- Hard offset shadows (0 blur, straight down) ----
     The source app layers a shifted ink rectangle behind each
     surface; in CSS that is a zero-blur box-shadow. Depth grows
     with the element's importance.
     NOTE: the brand brief describes these as "bottom-right"; the
     shipped Reccoo build offsets straight down. These tokens match
     the shipped build — flip the x-offset to 3-4px for bottom-right. */
  --shadow-sm: 0 3px 0 0 var(--ink-dark);   /* buttons, small raised bits */
  --shadow-md: 0 4px 0 0 var(--ink-dark);   /* panels, cards               */
  --shadow-lg: 0 6px 0 0 var(--ink-dark);   /* window shell / top level    */

  /* Pressed state: the surface slides down onto its shadow. */
  --press-shift: 3px;

  /* The inner top highlight stripe height. */
  --edge-highlight-h: 3px;
}