/* Verifirm — zmienne design systemu */
:root {
  --vf-font: 'Instrument Sans', Helvetica, Arial, sans-serif;

  /* Marka */
  --vf-navy: #101828;
  --vf-navy-900: #0B1F38;
  --vf-blue: #1878F8;
  --vf-blue-600: #0B5FD0;
  --vf-blue-800: #003A98;
  --vf-blue-900: #002A6E;
  --vf-blue-50: #EAF3FE;
  --vf-blue-100: #C9E0FD;
  --vf-blue-ink: #0B4FA8;
  --vf-focus: #D3E6FF;

  /* Tła */
  --vf-bg: #F6F7F9;
  --vf-surface: #FFFFFF;
  --vf-field: #EDEFF3;

  /* Tekst */
  --vf-text: #101828;
  --vf-text-body: #344054;
  --vf-text-muted: #475467;
  --vf-text-subtle: #5B6675;
  --vf-on-dark: #E6E9EE;
  --vf-on-dark-muted: #C3CDDC;
  --vf-on-dark-subtle: #9FB0C6;
  --vf-on-dark-faint: #8296B0;

  /* Obramowania */
  --vf-line: #EDEFF3;
  --vf-border: #E3E6EB;
  --vf-border-strong: #C7CCD6;
  --vf-border-hover: #A9B0BC;

  /* Statusy: tekst / tło / obramowanie */
  --vf-verified: #1F6F52;        --vf-verified-bg: #E7F4EE;  --vf-verified-border: #C6E4D5;
  --vf-pending: #8A6212;         --vf-pending-bg: #FDF3E0;   --vf-pending-border: #F0DFB4;
  --vf-neutral: #5B6675;         --vf-neutral-bg: #F2F4F7;   --vf-neutral-border: #E3E6EB;
  --vf-registry: #475467;        --vf-registry-bg: #EEF0F4;  --vf-registry-border: #DCE0E6;
  --vf-claimed: #0B4FA8;         --vf-claimed-bg: #EAF3FE;   --vf-claimed-border: #C9E0FD;
  --vf-error: #97302A;           --vf-error-bg: #FDECEA;     --vf-error-border: #F5D3CE;

  /* Pastelowe tła ikon branż */
  --vf-ind-plumber: #E3F1FD;
  --vf-ind-electrician: #FDF3E0;
  --vf-ind-painter: #F3ECFB;
  --vf-ind-roofer: #FBECE9;
  --vf-ind-carpenter: #F5EFE4;
  --vf-ind-renovation: #EAEEF4;
  --vf-ind-gardener: #EEF4E7;
  --vf-ind-tiler: #E6F2F2;
  --vf-ind-hvac: #EAEDFA;
  --vf-ind-cleaning: #FBECF2;

  /* Kształty */
  --vf-radius-xs: 4px;
  --vf-radius-sm: 6px;
  --vf-radius: 8px;
  --vf-radius-md: 10px;
  --vf-radius-lg: 12px;
  --vf-radius-full: 999px;

  /* Cienie */
  --vf-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
  --vf-shadow-pop: 0 3px 10px rgba(16, 24, 40, 0.07);
  --vf-shadow-hover: 0 14px 30px rgba(16, 24, 40, 0.10);
  --vf-shadow-float: 0 18px 38px rgba(16, 24, 40, 0.10);
  --vf-ring: 0 0 0 3px var(--vf-focus);

  /* Układ */
  --vf-container: 1440px;
  --vf-gutter: 40px;
  --vf-header-h: 84px;
  --vf-header-h-stuck: 70px;
}

@media (max-width: 720px) {
  :root { --vf-gutter: 20px; }
}