/* Bubbly Surreal — Color tokens
   A pastel candy palette anchored by ink-black outlines over warm cream.
   Base ramps first, semantic aliases second. */

:root {
  /* ---- Ink & paper (the structural anchors) ---- */
  --ink: #141210;          /* near-black — every outline, every stroke */
  --ink-soft: #3a352f;     /* softened ink for secondary text */
  --paper: #efe7d3;        /* warm cream — the world behind everything */
  --paper-deep: #e6dcc2;   /* a shade deeper cream, for recessed areas */
  --cloud: #fdfbf4;        /* off-white card / surface white */
  --cloud-pure: #ffffff;   /* pure white — highlights, sticker fills */

  /* ---- Candy pastels (base ramp) ---- */
  --pink: #f7a8d8;         /* signature bubblegum pink */
  --pink-deep: #ef7cc0;    /* pressed / active pink */
  --pink-soft: #fbd0ec;    /* pink tint / fill */

  --lilac: #c9b3ec;        /* lavender purple */
  --lilac-deep: #ac93df;
  --lilac-soft: #e4d8f6;

  --mint: #a9e6d2;         /* aqua mint green */
  --mint-deep: #79d3b6;
  --mint-soft: #d3f2e7;

  --sky: #a9dcee;          /* sky / cyan */
  --sky-deep: #74c6e5;
  --sky-soft: #d3eef7;

  --butter: #f6ec6a;       /* pale butter yellow */
  --butter-deep: #ecdc38;
  --butter-soft: #faf4b8;

  /* ---- Semantic surface aliases ---- */
  --surface-page: var(--paper);
  --surface-card: var(--cloud);
  --surface-sunken: var(--paper-deep);
  --surface-invert: var(--ink);

  /* ---- Semantic text aliases ---- */
  --text-strong: var(--ink);
  --text-body: var(--ink-soft);
  --text-invert: var(--cloud);
  --text-on-candy: var(--ink);   /* black text always reads on pastels */

  /* ---- Brand / accent roles ---- */
  --accent: var(--pink);
  --accent-deep: var(--pink-deep);
  --accent-2: var(--lilac);
  --accent-3: var(--mint);
  --accent-4: var(--sky);
  --accent-5: var(--butter);

  /* ---- Status roles (mapped onto the candy palette) ---- */
  --success: var(--mint);
  --success-deep: var(--mint-deep);
  --info: var(--sky);
  --info-deep: var(--sky-deep);
  --warn: var(--butter);
  --warn-deep: var(--butter-deep);
  --danger: var(--pink-deep);

  /* ---- Line / border ---- */
  --line: var(--ink);            /* the one true outline color */
  --line-hair: rgba(20,18,16,.18);  /* faint hairline for dividers inside cards */
}