/* ============================================================
   ТОПОР — Spacing, Layout, Radius & Elevation Tokens
   Base-8 rhythm. Industrial = minimal rounding (2px).
   ============================================================ */

:root {
  /* ---- Spacing scale · base 8 ---- */
  --tpr-space-1:   4px;    /* micro    */
  --tpr-space-2:   8px;    /* base     */
  --tpr-space-3:   16px;   /* inset    */
  --tpr-space-4:   24px;   /* gap      */
  --tpr-space-5:   40px;   /* block    */
  --tpr-space-6:   64px;   /* group    */
  --tpr-space-7:   104px;  /* section rhythm (desktop) */
  --tpr-space-7-m: 64px;   /* section rhythm (mobile)  */

  /* ---- Layout ---- */
  --tpr-container: 1180px;
  --tpr-gutter:    48px;   /* desktop page padding */
  --tpr-gutter-m:  20px;   /* mobile page padding  */
  --tpr-col-gap:   24px;   /* 12-col grid gap      */

  /* ---- Radius (industrial — minimal) ---- */
  --tpr-radius:    2px;    /* cards, buttons, fields */
  --tpr-radius-0:  0px;    /* logo mark — hard edges */

  /* ---- Borders ---- */
  --tpr-border:        1px solid var(--tpr-line);
  --tpr-border-dark:   1px solid var(--tpr-line-dark);
  --tpr-divider:       54px; /* signature short rule under headings */
  --tpr-divider-h:     4px;

  /* ---- Elevation ---- */
  --tpr-shadow-card: 0 1px 3px rgba(0,0,0,0.08);
  --tpr-shadow-pop:  0 18px 40px rgba(0,0,0,0.18);

  /* ---- Focus ring ---- */
  --tpr-ring: 0 0 0 3px rgba(230,58,38,0.35);

  /* ---- Breakpoints (reference) ---- */
  --tpr-bp-sm: 480px;
  --tpr-bp-md: 768px;
  --tpr-bp-lg: 1180px;

  /* ---- Motion ---- */
  --tpr-ease:     cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --tpr-dur:      0.18s; /* @kind other */
}