/* ============================================================================
   BRAND TOKENS — Pick n Pay brand pack.
   Colours from the supplied palette; Aleo (headings) + Rubik (body) from Google
   Fonts. To self-host the exact brand-pack font files instead, drop the .woff2
   files in /build/fonts and swap the @font-face src below for local() paths.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@400;500;700;800&family=Rubik:wght@300;400;500;600;700&display=swap');
:root {
  /* --- Pick n Pay core --- */
  --navy:      #003359;   /* Pick n Pay Blue — primary */
  --navy-2:    #00476f;   /* lifted blue for hovers / accents */
  --blue:      #003359;
  --lblue:     #d7e3ec;   /* tint of blue for banded headers */
  --pale:      #eef4f8;   /* faint blue wash */
  --red:       #be1d37;   /* Pick n Pay Red */
  --red-bg:    #fbe7ea;
  --cream:     #faf3dc;   /* Pick n Pay Cream — page background */
  --charcoal:  #191919;   /* Charcoal — primary text */

  /* --- promo / programme --- */
  --gold:      #ffdd00;   /* Smart Shopper Yellow — accents, editable cells */
  --gold-2:    #f5cf00;
  --promo-red: #ff0000;
  --green:     #2e7d32;   /* on-target */
  --green-bg:  #e8f3e9;
  --brand-green: #69ff00; /* Brand New Green — used sparingly */
  --amber:     #b06a00;
  --amber-bg:  #fbf0dd;

  /* --- neutrals mapped onto the brand --- */
  --grey:      #5f6b73;
  --line:      #e2dcc4;   /* warm hairline that sits on cream */
  --line-2:    #d5cdae;
  --card:      #ffffff;
  --bg:        var(--cream);
  --ink:       var(--charcoal);

  --font:      "Rubik", "Segoe UI", system-ui, sans-serif;
  --font-head: "Aleo", "Rubik", Georgia, serif;
  --font-num:  "Rubik", "Segoe UI", system-ui, sans-serif;

  --radius:    12px;
  --shadow:    0 1px 3px rgba(0,51,89,.10), 0 1px 2px rgba(0,51,89,.05);
  --shadow-lg: 0 6px 20px rgba(0,51,89,.12);
}