/* ============================================================
   Pantograph — Spacing, radius, borders, shadow, motion
   ------------------------------------------------------------
   A slide rule is a precision instrument: spacing is rigid and
   gridded (4px base unit), corners are barely rounded (the body
   has sharp machined edges), and shadows are shallow and warm,
   like an object resting on a drafting table — never glassy
   blue drop-shadows.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4px  */
  --space-2:   0.5rem;   /* 8px  */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.5rem;   /* 24px */
  --space-6:   2rem;     /* 32px */
  --space-7:   3rem;     /* 48px */
  --space-8:   4rem;     /* 64px */
  --space-9:   6rem;     /* 96px */

  /* Radius — machined, minimal. Nothing pill-shaped except by intent. */
  --radius-none: 0;
  --radius-xs:   2px;    /* inputs, code chips */
  --radius-sm:   3px;    /* buttons, badges */
  --radius-md:   5px;    /* cards, panels */
  --radius-lg:   8px;    /* large surfaces, dialogs */
  --radius-pill: 999px;  /* tags, switches — use deliberately */

  /* Border widths */
  --border-thin:   1px;
  --border-medium: 1.5px;
  --border-thick:  2px;

  /* Shadows — warm, low, like ink/paper on a table. Tinted with
     ink, never neutral gray, never blue. Keep them shallow. */
  --shadow-xs:  0 1px 0 rgba(30, 37, 51, 0.06);
  --shadow-sm:  0 1px 2px rgba(30, 37, 51, 0.10);
  --shadow-md:  0 2px 6px rgba(30, 37, 51, 0.12), 0 1px 0 rgba(30, 37, 51, 0.04);
  --shadow-lg:  0 8px 24px rgba(30, 37, 51, 0.16);
  --shadow-inset: inset 0 1px 2px rgba(30, 37, 51, 0.10);

  /* Engraved-tick separator: THE standard section break.
     A ruled scale — short ticks every --tick-pitch, with every
     5th tick at DOUBLE height, all centered on a common axis.
     The short ticks sit 20% shorter than a plain rule would, so
     the tall ones stand out without making the whole rule tall.
     Drive size with --tick-h-major (= the rule's height); the
     short tick is exactly half of it. */
  --tick-pitch:   8px;                              /* spacing between ticks */
  --tick-h-major: 14px;                             /* tall (every-5th) tick = rule height */
  --tick-h-minor: calc(var(--tick-h-major) / 2);    /* short tick — half the tall one */
  --tick-gradient:
    repeating-linear-gradient(90deg, var(--rule-tick) 0 1px, transparent 1px var(--tick-pitch))
      0 50% / 100% var(--tick-h-minor) repeat-x,
    repeating-linear-gradient(90deg, var(--rule-tick) 0 1px, transparent 1px calc(var(--tick-pitch) * 5))
      0 50% / 100% var(--tick-h-major) repeat-x;

  /* Motion — mechanical, precise, no bounce. Like a sliding cursor. */
  --ease-slide:  cubic-bezier(0.3, 0.0, 0.2, 1); /* @kind other */
  --ease-out:    cubic-bezier(0.2, 0.0, 0.0, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */

  /* Layout */
  --container-prose: 720px;   /* documentation reading column */
  --container-wide:  1140px;  /* app / marketing max width */
  --sidebar-width:   264px;
}