/* Design tokens — direction B ("Yeşil plaka güven"). The only place raw colour values live. */
:root {
  --color-bg: #F6F5F1;
  --color-surface: #FFFFFF;
  --color-surface-muted: #ECEAE3;
  --color-text: #14181F;
  --color-text-muted: #5E6672;
  --color-line: #E2DED3;
  --color-accent: #1F6B45;
  --color-accent-strong: #134A2F;
  --color-accent-soft: #E3F0E8;
  --color-warning-soft: #FBF1D6;
  --color-warning-text: #6B4E00;
  --color-neutral-soft: #ECEAE3;
  --color-neutral-text: #4A4740;
  --color-danger: #B42318;
  --color-danger-soft: #FDECEA;
  --color-on-accent: #FFFFFF;
  --color-overlay: rgba(20, 24, 31, 0.72);
  --color-on-dark-line: rgba(255, 255, 255, 0.12);
  --color-lightbox: rgba(0, 0, 0, 0.92);
  /* Car outline (Tabler "car", MIT) in --color-text-muted, shown behind missing listing photos. */
  --image-car-placeholder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6672' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5'/%3E%3C/svg%3E");

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16 */
  --text-lg: 1.25rem;   /* 20 */
  --text-xl: 1.5rem;    /* 24 */
  --text-2xl: 2rem;     /* 32 */
  --text-3xl: 2.5rem;   /* 40 */

  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */

  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 24, 31, 0.08);

  --container-max: 1200px;
  --gutter: 16px;
  --header-height: 64px;
  --transition: 150ms ease;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}