/* ============================================================
   Happy Quills — Color tokens
   A joyful, high-saturation crayon-box palette. Pink is the hero;
   yellow is the spark; the rainbow accents come from the logo.
   ============================================================ */

:root {
  /* ---- Brand core (provided by client) ---- */
  --hq-pink: #db4383;         /* dark pink — primary brand color */
  --hq-pink-light: #f992c9;   /* light pink — secondary / soft fills */
  --hq-yellow: #ffd753;       /* sunshine yellow — highlight / spark */

  /* ---- Pink ramp (derived from brand pinks) ---- */
  --hq-pink-050: #fdeef6;
  --hq-pink-100: #fcd9ec;
  --hq-pink-200: #fbbcdd;
  --hq-pink-300: #f992c9;     /* = light pink */
  --hq-pink-400: #ef6bb0;
  --hq-pink-500: #db4383;     /* = dark pink (primary) */
  --hq-pink-600: #c22f6f;
  --hq-pink-700: #9c2559;

  /* ---- Yellow ramp ---- */
  --hq-yellow-100: #fff3c9;
  --hq-yellow-300: #ffe289;
  --hq-yellow-400: #ffd753;   /* = brand yellow */
  --hq-yellow-500: #f5c62e;
  --hq-yellow-600: #e0ad12;

  /* ---- Rainbow accents (sampled from the logo wordmark) ---- */
  --hq-coral: #e8543b;        /* the "h" / "l" red-coral */
  --hq-sky: #4ba3e3;          /* the "a" / "q" blue */
  --hq-cloud: #a9d6f5;        /* soft cloud blue */
  --hq-green: #1f9d5f;        /* the "y" / "u" green */
  --hq-purple: #8b52d6;       /* the "l" purple */
  --hq-orange: #f0824e;       /* the quill feather */
  --hq-peach: #ffcf9e;        /* the "a" peach */

  /* ---- Ink & neutrals ---- */
  --hq-ink: #1d2b50;          /* navy ink — "english enrichment", inkpot */
  --hq-black: #1a1a1a;        /* near-black body text on light bg */
  --hq-white: #ffffff;
  --hq-cream: #fffdf7;        /* warm off-white page */
  --hq-gray-100: #f4f2ee;
  --hq-gray-200: #e6e2da;
  --hq-gray-400: #b3ada2;
  --hq-gray-600: #6f6a60;

  /* ---- Pastel set (schedule cards / soft blocks) ---- */
  --hq-pastel-pink: #fbd6e8;
  --hq-pastel-mint: #d3f3e2;
  --hq-pastel-lavender: #e4dcfb;
  --hq-pastel-peach: #ffe2c4;
  --hq-pastel-sky: #d3e8fb;
  --hq-pastel-yellow: #fff1b8;

  /* ============================================================
     Semantic aliases
     ============================================================ */

  /* Surfaces / backgrounds */
  --surface-page: var(--hq-cream);
  --surface-card: var(--hq-white);
  --surface-brand: var(--hq-pink-500);        /* dark-pink hero block */
  --surface-brand-soft: var(--hq-pink-light); /* light-pink block */
  --surface-spark: var(--hq-yellow-400);      /* yellow block */
  --surface-ink: var(--hq-ink);

  /* Text */
  --text-body: var(--hq-black);
  --text-heading: var(--hq-ink);
  --text-on-brand: var(--hq-white);
  --text-on-spark: var(--hq-ink);
  --text-muted: var(--hq-gray-600);
  --text-accent: var(--hq-pink-500);

  /* Interactive */
  --action-primary: var(--hq-pink-500);
  --action-primary-hover: var(--hq-pink-600);
  --action-primary-shadow: var(--hq-pink-700);   /* 3D pill under-shadow */
  --action-spark: var(--hq-yellow-400);
  --action-spark-hover: var(--hq-yellow-500);
  --action-spark-shadow: var(--hq-yellow-600);
  --action-on-primary: var(--hq-white);

  /* Highlight (marker behind text) */
  --highlight-spark: var(--hq-yellow-400);
  --highlight-soft: var(--hq-pink-light);
  --highlight-white: var(--hq-white);

  /* Lines / borders */
  --border-ink: var(--hq-black);       /* the signature thick black outline */
  --border-soft: var(--hq-gray-200);
  --focus-ring: var(--hq-sky);
}