/* ===========================================================================
   Pretence Games & Pretencify — Color tokens
   The two brands share ONE palette so the house styles stay aligned.
   Deep purple is the anchor; vivid violet is the spark; lavender + cream
   are the calm grounds. Pretence Games leans editorial (cream + serif),
   Pretencify leans product (white + structure) — same hues throughout.
   =========================================================================== */
:root {
  /* --- Brand purples (base scale) ----------------------------------------- */
  --pg-purple-950: #1F0047;   /* deepest, footer / overlays                  */
  --pg-purple-900: #310070;   /* PRIMARY brand purple (logos, dark sections) */
  --pg-purple-800: #45149A;
  --pg-purple-700: #5B22C0;
  --pg-violet-600: #8B2FE6;
  --pg-violet-500: #C23FFF;   /* VIVID accent — eyebrows, fills, highlights   */
  --pg-violet-400: #D072FF;
  --pg-lavender-300: #E0B8F7;
  --pg-lavender-200: #ECD2FB;  /* soft lavender card / pill ground            */
  --pg-lavender-100: #F4E6FC;  /* lightest lavender wash                      */

  /* --- Neutrals ----------------------------------------------------------- */
  --pg-cream: #F6F4EB;        /* warm editorial page ground (Pretence Games) */
  --pg-cream-dim: #EEEBDD;
  --pg-white: #FFFFFF;
  --pg-ink: #1A0033;          /* near-black purple text                      */
  --pg-grey-500: #6B6478;     /* muted captions on light                     */
  --pg-grey-300: #B8B2C2;
  --pg-line: #E4DEEC;         /* hairline dividers on light                  */

  /* --- Semantic: surfaces ------------------------------------------------- */
  --surface-page: var(--pg-cream);
  --surface-page-product: var(--pg-white);
  --surface-card: var(--pg-white);
  --surface-card-soft: var(--pg-lavender-100);
  --surface-invert: var(--pg-purple-900);
  --surface-invert-deep: var(--pg-purple-950);
  --surface-accent: var(--pg-violet-500);
  --surface-accent-soft: var(--pg-lavender-200);

  /* --- Semantic: text ----------------------------------------------------- */
  --text-strong: var(--pg-purple-900);   /* headings on light               */
  --text-body: var(--pg-ink);            /* body on light                   */
  --text-muted: var(--pg-grey-500);
  --text-on-invert: var(--pg-white);
  --text-on-invert-muted: rgba(255, 255, 255, 0.72);
  --text-eyebrow: var(--pg-violet-500);  /* small-caps section labels        */
  --text-link: var(--pg-violet-600);

  /* --- Semantic: borders & focus ------------------------------------------ */
  --border-subtle: var(--pg-line);
  --border-strong: var(--pg-purple-900);
  --focus-ring: var(--pg-violet-500);

  /* --- Semantic: interactive ---------------------------------------------- */
  --action-primary: var(--pg-violet-500);
  --action-primary-hover: var(--pg-violet-600);
  --action-primary-text: var(--pg-white);
  --action-dark: var(--pg-purple-900);
  --action-dark-hover: var(--pg-purple-800);
  --action-soft: var(--pg-lavender-200);
  --action-soft-text: var(--pg-purple-900);

  /* --- Status (kept on-brand, used sparingly) ----------------------------- */
  --status-success: #1E9E6A;
  --status-warning: #E0A100;
  --status-danger: #D8385A;
}