:root {
  /* Color — neutrals (warm, paper-like) */
  --paper:        #FAF9F6;  /* page background */
  --surface:      #FFFFFF;  /* cards, panels, popups */
  --line:         #E8E4DC;  /* hairline borders */
  --ink:          #182420;  /* primary text */
  --ink-soft:     #55635C;  /* secondary text */
  --ink-faint:    #8B958F;  /* placeholders, disabled */

  /* Color — brand */
  --pine-900:     #0C1F17;  /* lightbox, cover, footer */
  --pine-800:     #143528;  /* pressed / dark surfaces */
  --pine-700:     #1E4D3A;  /* primary actions, logo, links */
  --pine-600:     #2A6A50;  /* hover */
  --pine-100:     #E3EFE8;  /* tinted fills, selected chips */

  /* Color — park types (markers, badges) */
  --type-dog-park:     #2E7D5B;  /* šunų parkas */
  --type-walking:      #4A6FA5;  /* vedžiojimo aikštelė */
  --type-agility:      #B4642A;  /* dresūros aikštelė */
  --type-dog-park-bg:  #E4F1EA;
  --type-walking-bg:   #E8EEF6;
  --type-agility-bg:   #F6EBE0;
  --type-dog-park-text: #256B4B;  /* badge text ≥ AA on tinted bg */
  --type-walking-text:  #3E5F91;
  --type-agility-text:  #9A5620;

  /* Color — semantic */
  --ok:           #2E7D5B;  /* „yra" */
  --absent:       #9AA29C;  /* „nėra" — muted, not red; absence isn't an error */
  --danger:       #B3423A;  /* errors only */
  --focus-ring:   #2A6A50;
  --scrim:        rgb(12 31 23 / 0.34);  /* + backdrop-filter: blur(2px) */

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-ui:      "Inter", -apple-system, "Segoe UI", sans-serif;

  /* Spacing — 4px base scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radius */
  --r-s: 10px;   /* inputs, buttons */
  --r-m: 14px;   /* cards, popups */
  --r-l: 16px;   /* panels, bottom sheet */
  --r-sheet: 22px; /* mobile sheets */
  --r-full: 999px; /* chips, badges */

  /* Elevation — soft, low-contrast, never harsh */
  --shadow-1: 0 1px 2px rgb(24 36 32 / 0.06), 0 1px 3px rgb(24 36 32 / 0.08);
  --shadow-2: 0 4px 12px rgb(24 36 32 / 0.10), 0 1px 3px rgb(24 36 32 / 0.06);
  --shadow-3: 0 12px 32px rgb(24 36 32 / 0.14);
  --shadow-sheet: 0 -8px 40px rgb(20 53 40 / 0.18);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 140ms;  /* hovers, chips */
  --t-med:  220ms;  /* panels, popups, HTMX swaps */
  --t-sheet: 320ms; /* bottom sheets */
}