/* ============================================================
   Finger Marketing Services — Spacing, Radii, Shadows, Layout
   Designhandbuch §7: 8px spacing grid; container max 1200px;
   12px corner radius for cards; fully round for buttons/badges/
   signature. Cards use a subtle border, NOT a shadow.
   ============================================================ */

:root {
  /* --- 8px spacing scale --- */
  --space-0: 0;
  --space-1: 4px;    /* half-step */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* --- Radii --- */
  --radius-card: 12px;    /* cards (Designhandbuch §7) */
  --radius-sm: 8px;       /* inputs, small controls */
  --radius-md: 10px;
  --radius-pill: 999px;   /* buttons, badges, signature, tags */

  /* --- Layout --- */
  --container-max: 1200px;
  --container-pad: 24px;      /* gutter */
  --breakpoint-mobile: 640px;
  --touch-target-min: 44px;   /* min touch target (Designhandbuch §7) */

  /* ------------------------------------------------------------
     Shadows — used sparingly. The brand prefers a subtle BORDER
     over a shadow for cards (Designhandbuch §7). Elevation
     shadows are reserved for genuinely floating UI: dropdowns,
     dialogs, sticky nav on scroll.
     ------------------------------------------------------------ */
  --shadow-none: none;
  --shadow-dropdown: 0 8px 24px rgba(18, 33, 61, 0.12);
  --shadow-dialog: 0 24px 60px rgba(18, 33, 61, 0.20);
  --shadow-nav: 0 1px 0 rgba(18, 33, 61, 0.06);

  /* Focus ring — accessible outline in the brand accent */
  --focus-ring: 0 0 0 3px rgba(61, 99, 255, 0.35);

  /* Motion — restrained, functional fades/eases; no bounces */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
}