/* ============================================================
   The Trouble Markers — Color tokens
   The palette IS the cast. Each marker is a named character and a
   big feeling, drawn in a bright, saturated, hand-coloured crayon
   hue over a heavy black outline. Bold and unmuted — toddler-legible.
   Hues sampled from the character art.
   ============================================================ */

:root {
  /* ---- Ink & paper -------------------------------------- */
  --ink: #161616;            /* the hand-drawn outline — near-black, never pure #000 */
  --ink-soft: #3a3a3a;       /* secondary text */
  --paper: #ffffff;          /* the page the markers live on */
  --paper-cream: #fff8ec;    /* warm off-white surface */
  --paper-sky: #fef3d9;      /* soft yellow wash (box halo) */

  /* ---- The cast: one character + one big feeling per hue ---- */
  --madge-red: #ee1c24;      /* Madge — Mad */
  --frusty-orange: #f47c20;  /* Frusty — Frustrated */
  --jelly-green: #18a82a;    /* Jelly — Jealous */
  --bloo-blue: #2540ec;      /* Bloo — Sad */
  --scurry-purple: #9450f2;  /* Scurry — Scared */
  --yuckie-brown: #c0801f;   /* Yuckie — Disgusted */
  --slowmoe-gray: #9a9a9a;   /* SlowMoe — Sleepy / calm */
  --shylo-pink: #f79aac;     /* Shylo — Shy */
  --sunny-yellow: #ffb400;   /* the Marker Box host — Happy / calm guide */
  --box-green: #4a7e3f;      /* the Marker Box's grassy base */

  /* ---- Tints (soft fills, washes, hover backgrounds) ----- */
  --madge-tint: #fde0e0;
  --frusty-tint: #fde7d3;
  --sunny-tint: #fff992;
  --jelly-tint: #d6f1d9;
  --bloo-tint: #dde3fd;
  --scurry-tint: #ece0ff;
  --shylo-tint: #fde6ea;
  --yuckie-tint: #f3e6c8;

  /* ---- Deep shades (pressed states, text-on-tint) -------- */
  --madge-deep: #b01313;
  --frusty-deep: #c75d10;
  --sunny-deep: #d99400;
  --jelly-deep: #14801f;
  --bloo-deep: #182fc0;
  --scurry-deep: #6f2fcf;
  --yuckie-deep: #8a5a14;
  --shylo-deep: #c14a61;

  /* ---- Semantic aliases --------------------------------- */
  --color-primary: var(--sunny-yellow);     /* the friendly host yellow */
  --color-primary-deep: var(--sunny-deep);
  --color-accent: var(--frusty-orange);
  --color-danger: var(--madge-red);
  --color-success: var(--jelly-green);
  --color-info: var(--bloo-blue);
  --color-calm: var(--scurry-purple);

  --text-strong: var(--ink);
  --text-body: var(--ink-soft);
  --text-on-color: #ffffff;     /* white type sits on saturated hues */
  --text-on-yellow: var(--ink); /* …but ink on yellow */

  --surface-page: var(--paper);
  --surface-card: var(--paper);
  --surface-cream: var(--paper-cream);
  --surface-halo: var(--paper-sky);

  --border-ink: var(--ink);     /* the signature black keyline */
  --focus-ring: var(--bloo-blue);
}