/* ============================================================
   JonnyPops — Color Tokens
   AUTHORITATIVE: values per the 2025 JonnyPops Style Guide
   (edited May 2026). Where this and any sampled draft disagree,
   the style guide wins.

   Primary Red JP = #C5003E (PANTONE 1935 C).
   Token aliases (--jp-red, --jp-maroon, etc.) are kept stable so
   components don't break; values map to the official spec.
   ============================================================ */

:root {
  /* ---- PRIMARY (core identity — used most) ---- */
  --jp-off-white: #f5f1f1;   /* Off-White JP · PMS 663 C — primary surface */
  --jp-soft-pink: #f4c9d0;   /* Soft Pink JP · PMS 699 C */
  --jp-red: #c5003e;         /* Primary Red JP · PMS 1935 C — THE brand red */
  --jp-dark-red: #6f052d;    /* Dark Red JP · PMS 7421 C — deep text / pressed */

  /* ---- SECONDARY ---- */
  --jp-off-white-mult: #eee8e8; /* Off-White Multiplied · PMS 5315 C */
  --jp-grey-mid: #d6d2d1;       /* Mid Grey JP · PMS 428 C */
  --jp-stick-brown: #c3996b;    /* Stick Brown · PMS 2311 C — the maple stick */
  --jp-gold: #f9a51a;           /* Kindness Gold · PMS 137 C */
  --jp-grey-dark: #908c8c;      /* Dark Grey JP · PMS 424 C */
  --jp-woodburned: #4f3928;     /* Woodburned Brown · PMS 2322 C — engraved face */
  --jp-vivid-pink: #ef669c;     /* Vivid Pink · PMS 212 C */

  /* ---- PACKAGING (ADA) COMPLIANT — legal copy on pack.
         Use SPARINGLY elsewhere; NOT core brand colors. ---- */
  --jp-ada-green: #008752;       /* PMS 348 C (also the USDA-organic green) */
  --jp-ada-teal: #008896;        /* PMS 321 C */
  --jp-ada-purple: #712484;      /* PMS 7663 C */
  --jp-ada-deep-orange: #ef4e23; /* Orange 21 C */
  --jp-ada-red-brown: #712529;   /* PMS 7629 C */
  --jp-ada-blue: #2161ad;        /* PMS 7685 C */
  --jp-ada-superpower-blue: #2b88c8; /* PMS 2194 C */

  /* ---- Derived helpers (NOT in the guide — convenience tints/shades,
         clearly off-spec; reconcile if Marketing supplies exact values) ---- */
  --jp-red-bright: #de0f4d;   /* derived hover lift */
  --jp-pink-50: #fbeef0;      /* derived soft-pink tint */
  --jp-pink-200: #f1b9c4;     /* derived soft-pink mid */
  --jp-gold-deep: #e08f0a;    /* derived gold shade */
  --jp-line: #e7e0e0;         /* derived hairline */
  --jp-ink: #2a2422;          /* derived utility near-black */

  /* ---- TERTIARY: eyedropped POP colors ----
     Per §4.4 these are pulled with the eyedropper from product
     renders, used SPARINGLY and generally only on materials
     promoting that pop. There is NO official six-stripe rainbow
     in the core palette. Representative mid-tones below. */
  --jp-pop-red: #e8392e;
  --jp-pop-orange: #f6911e;
  --jp-pop-yellow: #fcc60a;
  --jp-pop-green: #5bb544;
  --jp-pop-blue: #2c9bd6;
  --jp-pop-purple: #8a5cc0;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --surface-page: var(--jp-off-white);
  --surface-card: #ffffff;
  --surface-brand: var(--jp-red);
  --surface-brand-soft: var(--jp-soft-pink);
  --surface-wood: var(--jp-stick-brown);
  --surface-inverse: var(--jp-dark-red);

  --text-strong: var(--jp-dark-red);
  --text-body: var(--jp-dark-red);
  --text-muted: var(--jp-grey-dark);
  --text-on-brand: var(--jp-off-white);
  --text-on-dark: var(--jp-off-white);
  --text-link: var(--jp-red);

  --accent-primary: var(--jp-red);
  --accent-kind: var(--jp-gold);
  --accent-pink: var(--jp-vivid-pink);

  --border-subtle: var(--jp-line);
  --border-strong: var(--jp-grey-mid);
  --focus-ring: var(--jp-ada-superpower-blue);

  /* ---- Back-compat aliases (legacy token names kept stable) ---- */
  --jp-cream: var(--jp-off-white);
  --jp-cream-warm: var(--jp-off-white-mult);
  --jp-white: #ffffff;
  --jp-maroon: var(--jp-dark-red);
  --jp-maroon-ink: #4f0420;       /* derived darkest berry */
  --jp-pink-100: var(--jp-soft-pink);
  --jp-pink-400: var(--jp-vivid-pink);
  --jp-pink-hot: var(--jp-vivid-pink);
  --jp-red-deep: var(--jp-dark-red);
  --jp-wood: var(--jp-stick-brown);
  --jp-wood-deep: var(--jp-woodburned);
  --jp-tan: var(--jp-stick-brown);
  --jp-organic-green: var(--jp-ada-green);
  --jp-blue: var(--jp-ada-blue);
  --jp-blue-bright: var(--jp-ada-superpower-blue);
  --jp-sky: #79b3e0;              /* derived */
  --jp-navy: #1b2e54;             /* derived (NOT a brand color) */
  --jp-purple: var(--jp-ada-purple);
  --jp-purple-soft: #9554a8;      /* derived */
  --jp-teal: var(--jp-ada-teal);
  --jp-line-strong: var(--jp-grey-mid);
  /* legacy rainbow names -> tertiary pop colors */
  --jp-rb-red: var(--jp-pop-red);
  --jp-rb-orange: var(--jp-pop-orange);
  --jp-rb-yellow: var(--jp-pop-yellow);
  --jp-rb-green: var(--jp-pop-green);
  --jp-rb-blue: var(--jp-pop-blue);
  --jp-rb-purple: var(--jp-pop-purple);
}