:root {
  /* ---- Brand red: the single saturated colour in the system ---- */
  --red-500: #e31e24; /* FireFrame red — primary actions, active nav, prices on sale */
  --red-600: #c4171c; /* hover / pressed */
  --red-700: #a11317; /* pressed on dark */
  --red-400: #ef4b50; /* illumination, hose highlight */
  --red-100: #fbd9da; /* tint borders */
  --red-50: #fdecec;  /* tint fills, promo rows */

  /* ---- Ink (neutral text) ---- */
  --ink-900: #111111; /* primary text */
  --ink-800: #1f1f1f; /* secondary dark, headings on light */
  --ink-600: #4b5054; /* body secondary */
  --ink-500: #6b7176; /* meta, captions */
  --ink-400: #8a9096; /* placeholder, disabled label */
  --ink-300: #b9bec2; /* disabled icon */

  /* ---- Lines and surfaces (light UI, 80% of the store) ---- */
  --line-strong: #d6d9db;
  --line: #e4e6e8;
  --line-soft: #eef0f1;
  --surface-0: #ffffff;
  --surface-1: #f7f7f7;
  --surface-2: #f5f5f5;
  --surface-3: #ededee;

  /* ---- Graphite (dark sections: Black Front zone, footer, utility strips) ---- */
  --graphite-900: #0d0e10;
  --graphite-800: #151719; /* footer background (brief §20) */
  --graphite-700: #1f2225;
  --graphite-600: #2b2f33;
  --graphite-500: #3a3f44;
  --on-dark-1: #ffffff;
  --on-dark-2: #c8ccce;
  --on-dark-3: #8f9498;
  --line-dark: #2e3236;

  /* ---- Metal (STORZ couplings, valves, mechanical details) ---- */
  --metal-100: #e9ebec;
  --metal-300: #c2c6c9;
  --metal-500: #9aa0a4;
  --metal-700: #6d7378;

  /* ---- Semantic ---- */
  --success-500: #1b8a4b; /* DOSTĘPNY, in stock */
  --success-50: #e8f5ed;
  --warning-500: #e58a00; /* low stock, on order */
  --warning-50: #fdf3e2;
  --danger-500: #e31e24;  /* = brand red; errors, out of stock */
  --danger-50: #fdecec;
  --info-500: #1d6fd0;    /* documents, technical notes */
  --info-50: #eaf2fc;
  --blue-beacon: #1d6fd0; /* the blue of warning beacons — used for UPRZYWILEJOWANIE only */
  --star-500: #f0a400;    /* review stars */

  /* ---- Semantic aliases: use these in components ---- */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-meta: var(--ink-500);
  --text-inverse: var(--on-dark-1);
  --text-inverse-secondary: var(--on-dark-2);
  --text-brand: var(--red-500);
  --text-link: var(--ink-900);
  --text-link-hover: var(--red-500);

  --bg-page: var(--surface-0);
  --bg-section: var(--surface-1);
  --bg-section-alt: var(--surface-2);
  --bg-dark: var(--graphite-800);
  --bg-dark-deep: var(--graphite-900);

  --surface-card: var(--surface-0);
  --border-card: var(--line);
  --border-input: var(--line-strong);
  --border-focus: var(--red-500);

  --action-primary: var(--red-500);
  --action-primary-hover: var(--red-600);
  --action-primary-active: var(--red-700);
  --action-secondary-border: var(--ink-900);
  --action-disabled-bg: var(--surface-3);
  --action-disabled-text: var(--ink-400);

  --focus-ring: 0 0 0 3px rgba(227, 30, 36, 0.28);

  /* ---- Category accents (used sparingly: icon + hose segment tint) ---- */
  --cat-oswietlenie: var(--red-500);
  --cat-uprzywilejowanie: var(--blue-beacon);
  --cat-quady: var(--ink-900);
  --cat-ratownictwo: var(--red-500);
  --cat-strazacki: var(--ink-900);
  --cat-przyczepki: var(--red-500);
  --cat-blackfront: var(--graphite-900);
}