/* Палитра.

   Фон нейтральный, без тёплого розово-персикового оттенка: приложением
   пользуются разные дети, и оно не должно выглядеть «для девочек» или
   «для мальчиков». Плитки букв белые — цветом окрашены только сама буква
   и тонкая рамка, никаких пастельных заливок.

   Цвет БУКВ не меняется между темами: красный — гласные, синий — твёрдые
   согласные, зелёный — всегда мягкие. Это школьный код, и переучивать
   ребёнка потом не придётся. */

:root {
  /* --- нейтральная тема (по умолчанию) --- */
  --bg:          #EFF0EC;
  --bg-deep:     #DFE1DB;
  --bg-glow:     #F8F9F6;
  --surface:     #FCFCFB;
  --surface-2:   #F4F5F2;
  --ink:         #333A36;
  --ink-soft:    #757D77;
  --line:        #D9DCD5;

  --accent:       #E0A32F;   /* «послушать» — тёплая охра, хорошо заметна */
  --accent-light: #F3C572;
  --accent-dark:  #B37D19;
  --accent-bg:    #F7EFDC;

  --ok:        #4F9A63;
  --ok-light:  #85C494;
  --ok-dark:   #37703F;

  --mascot-body:  #E9BE74;
  --mascot-ear:   #D9A64F;
  --mascot-inner: #F3DDB9;
  --mascot-blush: #C99A5E;   /* тёплая охра вместо розовых щёк */

  /* --- код букв, общий для всех тем --- */
  --vowel:      #C74C46;
  --vowel-line: #EFD3D1;
  --cons:       #2F6E92;
  --cons-line:  #CFDEE7;
  --soft:       #3F8B57;
  --soft-line:  #CFE4D5;
  --sign:       #877F72;
  --sign-line:  #DFDBD2;

  --radius:      28px;
  --radius-sm:   18px;
  --tap:         96px;      /* минимальная цель для детского пальца */
  --gap:         24px;      /* минимальный зазор между вариантами */

  --shadow:      0 5px 0 rgba(70, 78, 72, .12), 0 14px 30px rgba(70, 78, 72, .10);
  --shadow-sm:   0 3px 0 rgba(70, 78, 72, .12), 0 8px 18px rgba(70, 78, 72, .08);

  --font:        "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-letter: "Segoe UI", system-ui, -apple-system, Roboto, "Arial", sans-serif;

  --ease:        cubic-bezier(.22, .68, .36, 1);
}

/* --- Лес: приглушённая зелень и дерево --- */
:root[data-theme="forest"] {
  --bg:          #ECEFE7;
  --bg-deep:     #D8DFCE;
  --bg-glow:     #F6F8F1;
  --surface:     #FCFDF9;
  --surface-2:   #F1F4EA;
  --ink:         #2F3A31;
  --ink-soft:    #6E7A6D;
  --line:        #D3DAC7;
  --accent:       #C98A2E;
  --accent-light: #E7B96E;
  --accent-dark:  #96631A;
  --accent-bg:    #F3EAD8;
  --mascot-body:  #CFC08A;
  --mascot-ear:   #B9A76B;
  --mascot-inner: #EAE2C4;
  --mascot-blush: #A9925F;
}

/* --- Небо: холодные голубые тона --- */
:root[data-theme="sky"] {
  --bg:          #EAEFF3;
  --bg-deep:     #D3DEE7;
  --bg-glow:     #F5F8FB;
  --surface:     #FBFDFE;
  --surface-2:   #EFF4F8;
  --ink:         #2E373E;
  --ink-soft:    #6E7B85;
  --line:        #CFDAE2;
  --accent:       #D79A34;
  --accent-light: #EFC079;
  --accent-dark:  #A97220;
  --accent-bg:    #F4EBDA;
  --mascot-body:  #9CBCD2;
  --mascot-ear:   #7FA3BC;
  --mascot-inner: #D6E5EF;
  --mascot-blush: #6F94AE;
}

/* Ребёнок может держать планшет как угодно — учитываем вырезы */
:root {
  --safe-t: 12px;
  --safe-b: 12px;
  --safe-l: 12px;
  --safe-r: 12px;
}
@supports (padding: max(0px)) {
  :root {
    --safe-t: max(12px, env(safe-area-inset-top));
    --safe-b: max(12px, env(safe-area-inset-bottom));
    --safe-l: max(12px, env(safe-area-inset-left));
    --safe-r: max(12px, env(safe-area-inset-right));
  }
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}