/* Carolyn.G colour system.
   The pink ramp is the Pantone 690-series dusty-rose family taken straight from
   the brand's own Pantone fan deck photos. PANTONE 692 C is the core brand pink
   (it is the one circled in the supplied reference photo). */
:root {
  /* --- pink ramp (Pantone 691-697 C) --- */
  --pink-50: #fdf7f6;
  --pink-100: #f8ebea;
  --pink-200: #ead3d2; /* PANTONE 691 C */
  --pink-300: #e4bec3; /* PANTONE 692 C  <- CORE BRAND PINK */
  --pink-400: #d7a3ab; /* PANTONE 693 C */
  --pink-500: #c48490; /* PANTONE 694 C */
  --pink-600: #b46b7a; /* PANTONE 695 C */
  --pink-700: #984856; /* PANTONE 696 C */
  --pink-800: #893c47; /* PANTONE 697 C */

  /* --- gold / foil --- */
  --gold-100: #f6eddb;
  --gold-200: #eddcb9;
  --gold-300: #e8d2a2;
  --gold-400: #c9a24e;
  --gold-500: #ab8232;
  --gold-600: #8e6c2a;
  --gold-foil: linear-gradient(160deg, #f3e3bd 0%, #c9a24e 32%, #8e6c2a 58%, #dcbd77 78%, #a67f30 100%); /* @kind color */

  /* --- cream / neutral (warm, never grey) --- */
  --cream-0: #fffdfb;
  --cream-50: #fffaf5;
  --cream-100: #fdf4ec;
  --cream-200: #f7ece1;
  --cream-300: #eedfd1;
  --pearl: #f3ede4;

  /* --- ink (warm near-black from the logotype) --- */
  --ink-900: #1a1416;
  --ink-800: #2b2225;
  --ink-700: #3d3033;
  --ink-500: #6b585d;
  --ink-400: #8d7a7f;
  --ink-300: #b2a1a4;
  --ink-200: #d8cccd;

  /* --- accents lifted from the artwork --- */
  --lip-berry: #b41e5b;   /* the logo girl's lips */
  --lip-red: #ce2032;     /* retro-Hollywood lipstick red, moodboard */
  --blush: #f0b8bd;       /* cheek blush / sticker halo */
  --emerald: #2f7d62;     /* green satin ribbon in the trim book */

  /* --- semantic surfaces --- */
  --surface-page: var(--cream-50);
  --surface-card: var(--cream-0);
  --surface-raised: #ffffff;
  --surface-sunken: var(--cream-100);
  --surface-pink: var(--pink-100);
  --surface-pink-strong: var(--pink-300);
  --surface-ink: var(--ink-900);
  --surface-overlay: rgba(26, 20, 22, 0.44);
  --surface-glass: rgba(255, 253, 251, 0.72);

  /* --- semantic text --- */
  --text-body: var(--ink-800);
  --text-heading: var(--ink-900);
  --text-muted: var(--ink-500); /* quietest token allowed for normal-size text — 6.31:1 on cream */
  --text-subtle: var(--ink-400); /* 3.84:1 on cream — FAILS WCAG AA below 18.66px. Decorative / large text only. */
  --text-on-pink: var(--ink-900);
  --text-on-ink: var(--cream-50);
  --text-gold: var(--gold-500);
  --text-price: var(--ink-900);
  --text-sale: var(--lip-red);

  /* --- semantic lines --- */
  --line-hairline: rgba(26, 20, 22, 0.10);
  --line-soft: var(--cream-300);
  --line-pink: var(--pink-300);
  --line-gold: var(--gold-400);
  --line-ink: var(--ink-900);

  /* --- interactive --- */
  --action-primary: var(--ink-900);
  --action-primary-hover: var(--pink-800);
  --action-primary-text: var(--cream-50);
  --action-secondary: var(--pink-300);
  --action-secondary-hover: var(--pink-400);
  --action-secondary-text: var(--ink-900);
  --focus-ring: var(--pink-600);

  /* --- status --- */
  --status-success: var(--emerald);
  --status-success-bg: #e7f1ec;
  --status-danger: var(--lip-red);
  --status-danger-bg: #fbe9ea;
  --status-info: var(--pink-600);
  --status-info-bg: var(--pink-100);
  --status-sale: var(--lip-red);
  --status-new: var(--gold-500);
}