/* =========================================================
   Мурка's Candy Storybook — Design Tokens
   A warm, tactile picture-book system in pink for Sophia.
   ========================================================= */

:root {
  /* --- Candy palette --- */
  --pink:        #ff5fa2;   /* primary bubblegum */
  --pink-soft:   #ffb3d4;   /* soft petal */
  --pink-deep:   #c6316f;   /* ink / text accent */
  --pink-wash:   #ffe6f1;   /* pale fill */

  --bg:          #fff6fb;   /* cream paper */
  --bg-2:        #fff0f7;
  --surface:     #ffffff;   /* sticker white */
  --ink:         #4a2338;   /* soft dark plum for text */

  --mint:        #58d7b8;   /* accent — "same as English" */
  --sun:         #ffcb45;   /* accent — "tricky twin" */
  --sky:         #6fb7ff;   /* accent — "special sign" */
  --grape:       #b98cff;   /* accent — sparkle */

  /* --- Group colours (letter families) --- */
  --g-same:    var(--mint);
  --g-tricky:  var(--sun);
  --g-new:     var(--pink);
  --g-special: var(--sky);

  /* --- Shape --- */
  --radius:      26px;
  --radius-sm:   16px;
  --tap:         60px;      /* min touch target for little hands */

  /* --- Depth (layered candy shadows) --- */
  --shadow:      0 10px 0 rgba(198,49,111,0.16), 0 18px 30px rgba(198,49,111,0.18);
  --shadow-sm:   0 6px 0 rgba(198,49,111,0.14), 0 10px 18px rgba(198,49,111,0.16);
  --press:       0 4px 0 rgba(198,49,111,0.28);

  /* --- Type ---
     Rounded, friendly, and legible for early readers. All system/offline.
     Comic Sans / Chalkboard are deliberately chosen: high letter distinction,
     warmth, and dyslexia-friendliness for a 7-year-old. */
  --font-fun: "Baloo 2", "Fredoka", "Chalkboard SE", "Comic Sans MS",
              "Trebuchet MS", system-ui, sans-serif;
  --font-cyr: "PT Sans", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* --- Motion --- */
  --pop:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot / bounce */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}