/* Pick n Pay colour — values transcribed from the March 2025 brand manual.
   Print equivalents (Pantone / CMYK / NCS / RAL) live in readme.md. */
:root{
  /* --- Primary brand --- */
  --pnp-blue:#003359;          /* Pantone 540 C — the corporate blue */
  --pnp-red:#BE1D37;           /* Pantone 200 C — the corporate red (R190 G29 B55) */
  --pnp-red-alt:#BA0C2F;       /* hex printed on the People n Planet / asap! pages */
  --pnp-white:#FFFFFF;
  --pnp-black:#000000;         /* Pantone Black C */
  --pnp-charcoal:#191919;      /* Pantone 418 C — price points & description copy */

  /* --- Product & promotion --- */
  --pnp-green-new-product:#69FF00;  /* Pantone 376 C — "New product" flashes only */
  --pnp-red-promotion:#FF0000;      /* Pantone 485 C — promotion flashes only */

  /* --- Smart Shopper --- */
  --pnp-smart-blue:#3366CC;         /* Pantone 2727 */
  --pnp-smart-yellow:#FFE700;       /* Pantone P 1-8 */

  /* --- Neutrals derived from the corporate blue + charcoal ---
     Not in the manual; a working greyscale for digital surfaces. */
  --pnp-grey-000:#FFFFFF;
  --pnp-grey-025:#F6F8FA;
  --pnp-grey-050:#EFF2F5;
  --pnp-grey-100:#E2E7EC;
  --pnp-grey-200:#CBD3DB;
  --pnp-grey-300:#A8B4BF;
  --pnp-grey-400:#7C8B99;
  --pnp-grey-500:#5A6975;
  --pnp-grey-600:#3F4C57;
  --pnp-grey-700:#2A343C;
  --pnp-grey-800:#191919;
  --pnp-grey-900:#0D0D0D;

  /* Blue ramp — tints/shades of the corporate blue for UI states */
  --pnp-blue-900:#00223B;
  --pnp-blue-800:#002B4A;
  --pnp-blue-700:#003359;      /* = --pnp-blue */
  --pnp-blue-600:#0A4670;
  --pnp-blue-500:#155E90;
  --pnp-blue-300:#7FA3BB;
  --pnp-blue-100:#CCD6DE;
  --pnp-blue-050:#E6EBEF;

  /* Red ramp */
  --pnp-red-900:#7E101F;
  --pnp-red-700:#9E1730;
  --pnp-red-600:#BE1D37;       /* = --pnp-red */
  --pnp-red-300:#DE8E9B;
  --pnp-red-100:#F2D2D7;
  --pnp-red-050:#FBEDEF;

  /* --- Semantic aliases: surfaces --- */
  --surface-page:var(--pnp-grey-025);
  --surface-card:var(--pnp-white);
  --surface-sunken:var(--pnp-grey-050);
  --surface-inverse:var(--pnp-blue);
  --surface-inverse-deep:var(--pnp-blue-900);
  --surface-accent:var(--pnp-red);
  --surface-loyalty:var(--pnp-smart-yellow);
  --surface-promo:var(--pnp-red-promotion);
  --surface-new:var(--pnp-green-new-product);
  --surface-overlay:rgba(0,51,89,.55);

  /* --- Semantic aliases: text --- */
  --text-heading:var(--pnp-blue);
  --text-body:var(--pnp-charcoal);
  --text-muted:var(--pnp-grey-500);
  --text-inverse:var(--pnp-white);
  --text-price:var(--pnp-charcoal);
  --text-accent:var(--pnp-red);
  --text-link:var(--pnp-blue);
  --text-link-hover:var(--pnp-red);
  --text-on-loyalty:var(--pnp-blue);

  /* --- Semantic aliases: lines --- */
  --border-subtle:var(--pnp-grey-100);
  --border-default:var(--pnp-grey-200);
  --border-strong:var(--pnp-blue);
  --border-focus:var(--pnp-smart-blue);

  /* --- Interaction --- */
  --action-primary:var(--pnp-red);
  --action-primary-hover:var(--pnp-red-700);
  --action-primary-active:var(--pnp-red-900);
  --action-secondary:var(--pnp-blue);
  --action-secondary-hover:var(--pnp-blue-600);
  --action-secondary-active:var(--pnp-blue-900);
  --action-disabled-bg:var(--pnp-grey-100);
  --action-disabled-fg:var(--pnp-grey-400);

  /* --- Status (digital only; not defined in the manual) --- */
  --status-success:#1E7F3C;
  --status-success-bg:#E7F4EB;
  --status-warning:#B26A00;
  --status-warning-bg:#FDF2E0;
  --status-error:var(--pnp-red);
  --status-error-bg:var(--pnp-red-050);
  --status-info:var(--pnp-smart-blue);
  --status-info-bg:#E9F0FB;
}