/* ============================================================
   COLORS — Inventory System (Vodafone-inspired red/ink system)
   Single accent: brand red. Ink + grayscale neutrals only.
   ============================================================ */
:root {
  /* --- Brand / Accent --- */
  --color-primary: #e60000;          /* Vodafone-style brand red — every primary CTA + the speechmark orb */
  --color-on-primary: #ffffff;       /* text/icon on primary red */

  /* --- Surface --- */
  --color-canvas: #ffffff;           /* default light content background */
  --color-canvas-soft: #f2f2f2;      /* near-white tint — badge-chip background */
  --color-ink: #25282b;              /* near-black — dark hero band, nav, footer; also body text on light */

  /* --- Text --- */
  --color-text: #25282b;             /* headings + body on light surfaces (alias of ink) */
  --color-body: #7e7e7e;             /* secondary body — captions, metadata, supporting copy */
  --color-mute: #bebebe;             /* lowest-priority — placeholder, low-key footer links */
  --color-on-dark: #ffffff;          /* all text on ink surfaces (hero, footer, nav) */

  /* --- Semantic aliases --- */
  --surface-canvas: var(--color-canvas);
  --surface-soft: var(--color-canvas-soft);
  --surface-dark: var(--color-ink);
  --text-heading: var(--color-ink);
  --text-body: var(--color-body);
  --text-mute: var(--color-mute);
  --border-hairline: var(--color-ink);
  --border-on-dark: var(--color-on-dark);

  /* The brand keeps no separate semantic palette — red doubles as
     validation / destructive signal when needed. */
  --color-danger: var(--color-primary);
}