/*
  EE Print Pack — design tokens.

  Palette is built around the real logo (navy #182857 + its teal-green) so the
  mark sits in the design instead of fighting it:
    - pure white page ground
    - deep navy for all type
    - one pine green for actions and "verified" signals
    - WhatsApp's own green, used ONLY on WhatsApp buttons
  No olive/forest green and no orange anywhere — both were removed deliberately.
*/
:root {
  /* Ground */
  --white: #ffffff;
  --paper: #ffffff;          /* page background — pure white */
  --surface: #f6f7f9;        /* alternating section band */
  --surface-2: #eef0f4;      /* image wells, inset blocks */
  --line: #e2e6ec;

  /* Type */
  --ink: #182857;            /* logo navy — headings and primary text */
  --ink-soft: #4a5468;
  --ink-faint: #7c8798;

  /* Action */
  --pine: #1b5e4e;           /* primary buttons + accents */
  --pine-deep: #14483c;      /* hover */
  --pine-tint: #e8f1ee;      /* badge / soft fill */
  --accent: var(--pine);     /* legacy alias — everything accent-coloured is pine now */
  --accent-ink: #ffffff;

  /* Verified / trust signal */
  --trust: var(--pine);
  --trust-bg: var(--pine-tint);

  /* WhatsApp — brand-locked, never reused for anything else */
  --wa: #25d366;
  --wa-deep: #1da851;

  /* Dark surfaces (footer, CTA bands) */
  --dark: #101a35;
  --dark-2: #182857;
  --on-dark: #ffffff;
  --on-dark-soft: #b9c1d4;

  /* ---- Product family accents ----
     Colour here carries information: which family a line belongs to. Hues are
     pulled deliberately toward the brand's navy→teal→pine axis plus two warm
     tones, so the set reads as one palette rather than a rainbow. Used on the
     family label, the card's top rule and its hover state — never on buttons,
     which stay pine so "action" keeps one colour. */
  --fam-retail:      #b4531f;  /* warm rust — retail bags */
  --fam-mesh:        #1b5e4e;  /* pine — mesh & netting */
  --fam-film:        #2f6f9e;  /* steel blue — film & poly */
  --fam-compostable: #4a7c3f;  /* leaf — compostable */
  --fam-trays:       #8a6a2f;  /* kraft — trays & closures */
  --fam-industrial:  #3c4a63;  /* slate — industrial */

  /* Type families */
  --font-body: "Urbanist", system-ui, -apple-system, sans-serif;
  --font-display: "Urbanist", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Scale */
  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(16, 26, 53, .05), 0 12px 32px -14px rgba(16, 26, 53, .18);
  --shadow-lift: 0 24px 60px -24px rgba(16, 26, 53, .35);
  --container: 1180px;
}