/* Bubbly Surreal — GOTH KAWAII theme
   A dark, tongue-in-cheek alternate. Wrap any subtree in
   `data-theme="goth"` and every component flips: bone-white outlines & text on
   a deep aubergine world, with jewel-toned candy that glows in the dark.

   Because components read the BASE tokens (--ink, --cloud, --pink, …), this
   scope only has to remap those — the semantic aliases inherit automatically. */

[data-theme="goth"] {
  /* ---- Ink & paper: flipped. "Ink" is now bone; "paper" is near-black. ---- */
  --ink: #d9c9ef;          /* pale lilac — softer outlines & text than stark bone */
  --ink-soft: #a99bc4;     /* muted lavender-grey for secondary text */
  --paper: #14101b;        /* deep aubergine-black — the world */
  --paper-deep: #1d1727;   /* recessed panels */
  --cloud: #221b2e;        /* card surface (a lifted dark panel) */
  --cloud-pure: #2b2338;   /* raised dark */

  /* ---- Candy pastels: jewel-toned so bone text/outlines read on the fills
         and they glow against the near-black page. ---- */
  --pink: #d95b96;         /* orchid berry — the goth signature */
  --pink-deep: #c23f7e;
  --pink-soft: #35202e;    /* dark berry tint — chip fills */

  --lilac: #8f66cf;
  --lilac-deep: #7746bd;
  --lilac-soft: #2a2440;

  --mint: #3fae8a;         /* deep toxic mint */
  --mint-deep: #2f976f;
  --mint-soft: #17322b;

  --sky: #4f97c9;
  --sky-deep: #3a7fb2;
  --sky-soft: #16293a;

  --butter: #c9b23f;       /* tarnished gold */
  --butter-deep: #b39c2c;
  --butter-soft: #322d16;

  /* ---- Lines & rings ---- */
  --line: var(--ink);            /* bone outlines */
  --line-hair: rgba(217,201,239,.16);
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--pink);

  /* ---- A blood-red danger, because goth ---- */
  --danger: #d94141;

  /* ---- Semantic aliases MUST be re-declared here. A custom property whose
         value contains var() is substituted where it's DECLARED, so the aliases
         on :root locked to the light base values — remapping base tokens alone
         doesn't re-flip them. Re-point them inside this scope. ---- */
  --surface-page: var(--paper);
  --surface-card: var(--cloud);
  --surface-sunken: var(--paper-deep);
  --surface-invert: var(--ink);

  --text-strong: var(--ink);
  --text-body: var(--ink-soft);
  --text-invert: var(--paper);
  --text-on-candy: var(--ink);

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

  --success: var(--mint);
  --success-deep: var(--mint-deep);
  --info: var(--sky);
  --info-deep: var(--sky-deep);
  --warn: var(--butter);
  --warn-deep: var(--butter-deep);
}

/* Hard shadows stay DARK on the near-black page so they recede instead of
   glaring white. --shadow-ink is the single dark shadow color; re-declaring the
   shadow tokens here re-points them at goth's shadow-ink. */
[data-theme="goth"] {
  --shadow-ink: #05030a;
  --shadow-hard-sm: 3px 3px 0 var(--shadow-ink);
  --shadow-hard: 5px 5px 0 var(--shadow-ink);
  --shadow-hard-lg: 8px 8px 0 var(--shadow-ink);
  --shadow-hard-xl: 12px 12px 0 var(--shadow-ink);
  --shadow-pink: 5px 5px 0 var(--pink-deep);
  --shadow-lilac: 5px 5px 0 var(--lilac-deep);
}