/* ============================================================
   Eduson Kids Practice — общий дизайн-слой (бренд)
   Токены извлечены из Eduson Kids Designbook (проверены).
   Подключается на всех страницах. Шрифты — self-host (autonomy).
   ============================================================ */
@import url('./fonts/fonts.css');

:root {
  /* ---- Brand core (inherited from parent Эдюсон) ---- */
  --ink:          #15141B;   /* основной текст, почти-чёрный */
  --ink-soft:     #2B2A36;   /* вторичный текст */
  --ink-mute:     #6A687A;   /* подписи, мьюты */
  --paper:        #FFFBF3;   /* тёплый кремовый фон */
  --paper-2:      #F4EFE3;   /* светлый вариант бумаги */
  --paper-3:      #ECE4D2;   /* тёмный вариант бумаги */
  --line:         rgba(21,20,27,.10);
  --line-soft:    rgba(21,20,27,.07);

  /* ---- Primary brand ---- */
  --violet:       #6B5CE7;
  --violet-deep:  #4A3DC9;   /* тень нажатия */
  --violet-soft:  #E4E0FC;
  --violet-ink:   #2A1F8C;

  /* ---- Accents (= семантика блоков программирования) ---- */
  --yellow:       #FFD43C;  --yellow-deep:#C99E00; --yellow-ink:#7A5900; --yellow-soft:#FFF0B0;
  --mint:         #9FE8C7;  --mint-deep:  #3DB07A;  --mint-ink:  #0C4E2E; --mint-soft: #E1F7EC;
  --pink:         #FFB4C8;  --pink-deep:  #E8517B;  --pink-ink:  #6A1A33; --pink-soft: #FFE4EC;
  --sky:          #A9D8FF;  --sky-deep:   #3E87E8;  --sky-ink:   #0E3A66; --sky-soft:  #DFF0FF;
  --orange:       #FF9454;  --orange-deep:#D96A24;  --orange-ink:#5C2B12; --orange-soft:#FFE2CE;

  /* состояния */
  --ok:   var(--mint-deep);
  --warn: var(--orange-deep);
  --err:  var(--pink-deep);

  /* ---- Typography ---- */
  --f-display: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-ui:      'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Shape ---- */
  --r-sm:   10px;
  --r:      14px;
  --r-card: 22px;
  --r-lg:   32px;
  --r-pill: 999px;

  /* ---- Shadows (тёплые, слоёные) ---- */
  --sh-1: 0 1px 0 rgba(21,20,27,.06), 0 2px 6px rgba(21,20,27,.06);
  --sh-2: 0 2px 0 rgba(21,20,27,.08), 0 10px 24px rgba(21,20,27,.09);
  --sh-3: 0 3px 0 rgba(21,20,27,.10), 0 18px 44px rgba(21,20,27,.12);
  --sh-block: 0 4px 0 0 rgba(21,20,27,.20);   /* «чанковая» LEGO-тень */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,1,.36,1);
  --t-fast: .12s;
  --t: .2s;
  --t-slow: .42s;

  /* ---- Layout ---- */
  --maxw: 1120px;
  --gap: 24px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-ui);
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 900; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
img,svg { display: block; max-width: 100%; }
.mono { font-family: var(--f-mono); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 6px; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  border: none;
  padding: 13px 22px 15px;
  border-radius: var(--r);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--paper);
  background: var(--violet);
  box-shadow: 0 4px 0 var(--violet-deep);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover  { transform: translateY(-1px); box-shadow: 0 5px 0 var(--violet-deep); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--violet-deep); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--lg { font-size: 18px; padding: 17px 30px 19px; border-radius: 18px; }
.btn--sm { font-size: 13px; padding: 9px 15px 11px; border-radius: var(--r-sm); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--violet); transform: translateY(-1px); }
.btn--yellow { background: var(--yellow); color: var(--yellow-ink); box-shadow: 0 4px 0 var(--yellow-deep); }
.btn--yellow:hover  { box-shadow: 0 5px 0 var(--yellow-deep); }
.btn--yellow:active { box-shadow: 0 1px 0 var(--yellow-deep); }
.btn--mint  { background: var(--mint); color: var(--mint-ink); box-shadow: 0 4px 0 var(--mint-deep); }
.btn--pink  { background: var(--pink); color: var(--pink-ink); box-shadow: 0 4px 0 var(--pink-deep); }

/* ---------- age badge / chips ---------- */
.badge-age {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1.5px var(--line);
  white-space: nowrap;
}
.chip {
  background: var(--paper-2);
  color: var(--ink);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- card primitive ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}

/* ---------- brand lockup ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--violet); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 900; font-size: 19px;
  box-shadow: var(--sh-block);
}
.brand-text { font-family: var(--f-display); font-weight: 900; font-size: 18px; letter-spacing: -.02em; }
.brand-text span { color: var(--violet); }

/* ---------- helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}