/* === EduBot Design Tokens ===
   Единый источник правды для всего miniapp.
   Алиасы внизу — backward compat для старого кода, не удалять.
*/
:root {
  /* ── Surfaces ── */
  --bg:            #f0ede6;   /* page background */
  --card:          #ffffff;   /* card / panel surface */
  --surface-muted: #f8f5ee;   /* pressed / subtle bg */

  /* ── Text ── */
  --ink:    #1a1a2e;  /* primary text */
  --muted:  #6b7280;  /* secondary text */
  --faint:  #9ca3af;  /* tertiary / disabled */

  /* ── Brand ── */
  --accent: #4f46e5;  /* primary action — indigo */
  --hot:    #E8503A;  /* coral / mascot accent */
  --streak: #f97316;  /* streak / orange rewards */

  /* ── Semantic states ── */
  --correct:    #16a34a;
  --wrong:      #dc2626;
  --correct-bg: #dcfce7;
  --wrong-bg:   #fee2e2;
  --amber:      #d97706;
  --rose:       #e11d48;

  /* ── Tinted accent backgrounds ── */
  --accent-dim: rgba(79, 70, 229, 0.08);

  /* ── Structure ── */
  --border:    #e5e1d8;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.10);

  /* ── Shape ── */
  --radius-sm: 8px;
  --radius:    12px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --nav-h:       72px;
  --safe-top:    0px;
  --safe-bottom: 0px;

  /* ── Typography ── */
  --font: 'Manrope', system-ui, sans-serif;

  /* ── Backward-compat aliases (не переименовывать — используются в HTML) ── */
  --ink-muted:      #6b7280;   /* = --muted */
  --green:          #16a34a;   /* = --correct */
  --red:            #dc2626;   /* = --wrong */
  --danger:         #dc2626;   /* = --wrong */
  --text:           #1a1a2e;   /* = --ink */
  --text-secondary: #6b7280;   /* = --muted */
  --shadow:         0 2px 8px rgba(0,0,0,0.10); /* = --shadow-md */
  --radius-lg:      12px;      /* = --radius */
  --radius-md:      12px;      /* = --radius */

  /* ════════════════════════════════════════════════════
     MD3 TOKENS — алиасы поверх бренда EduBot
     Используй --md-sys-color-* в новых компонентах.
     Старый код продолжает работать через --accent / --bg.
     ════════════════════════════════════════════════════ */

  /* ── MD3 Color: Primary (indigo #4f46e5) ── */
  --md-sys-color-primary:                #4f46e5;
  --md-sys-color-on-primary:             #ffffff;
  --md-sys-color-primary-container:      #e0e7ff;
  --md-sys-color-on-primary-container:   #1e1578;

  /* ── MD3 Color: Secondary (coral #E8503A) ── */
  --md-sys-color-secondary:              #E8503A;
  --md-sys-color-on-secondary:           #ffffff;
  --md-sys-color-secondary-container:    #fde8e5;
  --md-sys-color-on-secondary-container: #6b1a0f;

  /* ── MD3 Color: Tertiary (streak orange #f97316) ── */
  --md-sys-color-tertiary:               #f97316;
  --md-sys-color-on-tertiary:            #ffffff;
  --md-sys-color-tertiary-container:     #fff7ed;
  --md-sys-color-on-tertiary-container:  #7c2d12;

  /* ── MD3 Color: Error ── */
  --md-sys-color-error:                  #dc2626;
  --md-sys-color-on-error:               #ffffff;
  --md-sys-color-error-container:        #fee2e2;
  --md-sys-color-on-error-container:     #7f1d1d;

  /* ── MD3 Color: Surface (warm beige #f0ede6) ── */
  --md-sys-color-surface:                #f0ede6;
  --md-sys-color-on-surface:             #1a1a2e;
  --md-sys-color-on-surface-variant:     #6b7280;
  --md-sys-color-surface-container-lowest:  #faf9f6;
  --md-sys-color-surface-container-low:     #f8f5ee;
  --md-sys-color-surface-container:         #f0ede6;
  --md-sys-color-surface-container-high:    #e8e4dc;
  --md-sys-color-surface-container-highest: #e0dbd2;
  --md-sys-color-surface-dim:            #d8d4cc;
  --md-sys-color-surface-bright:         #faf9f6;

  /* ── MD3 Color: Outline ── */
  --md-sys-color-outline:                #e5e1d8;
  --md-sys-color-outline-variant:        #ebe8e1;

  /* ── MD3 Color: Inverse (for snackbars etc.) ── */
  --md-sys-color-inverse-surface:        #1a1a2e;
  --md-sys-color-inverse-on-surface:     #f0ede6;
  --md-sys-color-inverse-primary:        #a5b4fc;

  /* ── MD3 Shape ── */
  --md-sys-shape-corner-none:            0px;
  --md-sys-shape-corner-extra-small:     4px;
  --md-sys-shape-corner-small:           8px;
  --md-sys-shape-corner-medium:          12px;
  --md-sys-shape-corner-large:           16px;
  --md-sys-shape-corner-extra-large:     28px;
  --md-sys-shape-corner-full:            9999px;

  /* ── MD3 Motion (standard easing for web) ── */
  --md-sys-motion-easing-standard:          cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-emphasized:         cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short1:        50ms;
  --md-sys-motion-duration-short2:        100ms;
  --md-sys-motion-duration-short3:        150ms;
  --md-sys-motion-duration-short4:        200ms;
  --md-sys-motion-duration-medium1:       250ms;
  --md-sys-motion-duration-medium2:       300ms;
  --md-sys-motion-duration-medium3:       350ms;
  --md-sys-motion-duration-medium4:       400ms;
  --md-sys-motion-duration-long1:         450ms;
  --md-sys-motion-duration-long2:         500ms;

  /* ── MD3 Typography (Manrope вместо Roboto Flex) ── */
  --md-sys-typescale-display-large-font:       'Manrope', system-ui, sans-serif;
  --md-sys-typescale-display-large-size:       3.5625rem;
  --md-sys-typescale-display-large-weight:     400;
  --md-sys-typescale-display-large-line-height: 4rem;

  --md-sys-typescale-headline-large-font:      'Manrope', system-ui, sans-serif;
  --md-sys-typescale-headline-large-size:      2rem;
  --md-sys-typescale-headline-large-weight:    400;
  --md-sys-typescale-headline-large-line-height: 2.5rem;

  --md-sys-typescale-headline-medium-font:     'Manrope', system-ui, sans-serif;
  --md-sys-typescale-headline-medium-size:     1.75rem;
  --md-sys-typescale-headline-medium-weight:   400;
  --md-sys-typescale-headline-medium-line-height: 2.25rem;

  --md-sys-typescale-headline-small-font:      'Manrope', system-ui, sans-serif;
  --md-sys-typescale-headline-small-size:      1.5rem;
  --md-sys-typescale-headline-small-weight:    400;
  --md-sys-typescale-headline-small-line-height: 2rem;

  --md-sys-typescale-title-large-font:         'Manrope', system-ui, sans-serif;
  --md-sys-typescale-title-large-size:         1.375rem;
  --md-sys-typescale-title-large-weight:       400;
  --md-sys-typescale-title-large-line-height:  1.75rem;

  --md-sys-typescale-title-medium-font:        'Manrope', system-ui, sans-serif;
  --md-sys-typescale-title-medium-size:        1rem;
  --md-sys-typescale-title-medium-weight:      500;
  --md-sys-typescale-title-medium-line-height: 1.5rem;

  --md-sys-typescale-title-small-font:         'Manrope', system-ui, sans-serif;
  --md-sys-typescale-title-small-size:         0.875rem;
  --md-sys-typescale-title-small-weight:       500;
  --md-sys-typescale-title-small-line-height:  1.25rem;

  --md-sys-typescale-body-large-font:          'Manrope', system-ui, sans-serif;
  --md-sys-typescale-body-large-size:          1rem;
  --md-sys-typescale-body-large-weight:        400;
  --md-sys-typescale-body-large-line-height:   1.5rem;

  --md-sys-typescale-body-medium-font:         'Manrope', system-ui, sans-serif;
  --md-sys-typescale-body-medium-size:         0.875rem;
  --md-sys-typescale-body-medium-weight:       400;
  --md-sys-typescale-body-medium-line-height:  1.25rem;

  --md-sys-typescale-body-small-font:          'Manrope', system-ui, sans-serif;
  --md-sys-typescale-body-small-size:          0.75rem;
  --md-sys-typescale-body-small-weight:        400;
  --md-sys-typescale-body-small-line-height:   1rem;

  --md-sys-typescale-label-large-font:         'Manrope', system-ui, sans-serif;
  --md-sys-typescale-label-large-size:         0.875rem;
  --md-sys-typescale-label-large-weight:       500;
  --md-sys-typescale-label-large-line-height:  1.25rem;

  --md-sys-typescale-label-medium-font:        'Manrope', system-ui, sans-serif;
  --md-sys-typescale-label-medium-size:        0.75rem;
  --md-sys-typescale-label-medium-weight:      500;
  --md-sys-typescale-label-medium-line-height: 1rem;

  --md-sys-typescale-label-small-font:         'Manrope', system-ui, sans-serif;
  --md-sys-typescale-label-small-size:         0.6875rem;
  --md-sys-typescale-label-small-weight:       500;
  --md-sys-typescale-label-small-line-height:  1rem;
}

/* ── Global interactive feedback ──────────────────────────────────────────
   iOS Safari only fires :active on touch if a touchstart listener exists
   (added by safe-area.js). -webkit-tap-highlight-color removes the native
   blue flash so our opacity effect is the only visual response.
─────────────────────────────────────────────────────────────────────────── */
button,
a,
[role="button"],
[onclick] {
  -webkit-tap-highlight-color: transparent;
}

button:active,
a:active,
[role="button"]:active,
[onclick]:active {
  opacity: 0.72;
  transition: opacity 0.08s;
}

/* Restore full opacity immediately on release */
button,
a,
[role="button"],
[onclick] {
  transition: opacity 0.2s;
}