/* =====================================================
   Besteach — Trial Lesson PRE/PRI
   Design tokens as CSS variables
   Source: tokens.json (source of truth)
   ===================================================== */

:root {
  /* ---- Brand palette (IMMUTABLE — ADR-2026-03-15) ---- */
  --color-mint:        #47C9AF;
  --color-mint-100:    #E8FAF5;
  --color-mint-300:    #8FDFCE;
  --color-mint-500:    #47C9AF;
  --color-mint-700:    #2E9E88;
  --color-mint-900:    #1B5F52;

  --color-ultramarine: #3451B2;
  --color-blue-100:    #E0E6F7;
  --color-blue-300:    #7E91D8;
  --color-blue-500:    #3451B2;
  --color-blue-700:    #223688;
  --color-blue-900:    #121E4F;

  --color-orange:      #FF8C42;
  --color-orange-100:  #FFE8D6;
  --color-orange-500:  #FF8C42;
  --color-orange-700:  #D96A20;

  /* ---- Backgrounds ---- */
  --bg-base:    #0E121C;
  --bg-surface: #1A1F2E;
  --bg-elev-1:  #242B3D;
  --bg-elev-2:  #2E374E;
  --bg-overlay: rgba(14, 18, 28, 0.72);

  /* ---- Text ---- */
  --text-primary:   #F2F4F8;
  --text-secondary: #A6ADBD;
  --text-muted:     #6B7388;
  --text-inverse:   #0E121C;

  /* ---- Borders ---- */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-regular: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);
  --border-focus:   #47C9AF;

  /* ---- Semantic ---- */
  --success:     #47C9AF;
  --success-bg:  rgba(71,201,175,0.12);
  --error:       #FF5C7A;
  --error-bg:    rgba(255,92,122,0.12);
  --warning:     #FF8C42;
  --info:        #3451B2;

  /* ---- Typography ---- */
  --font-display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-display:  40px;
  --fs-h1:       32px;
  --fs-h2:       24px;
  --fs-h3:       20px;
  --fs-lead:     18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;
  --fs-button:   16px;

  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-base:    1.5;
  --lh-relaxed: 1.6;

  /* ---- Spacing (4px base unit) ---- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Radii ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm:          0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:          0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg:          0 16px 48px rgba(0,0,0,0.45);
  --shadow-glow-mint:   0 0 0 4px rgba(71,201,175,0.18),  0 0 28px rgba(71,201,175,0.35);
  --shadow-glow-blue:   0 0 0 4px rgba(52,81,178,0.22),   0 0 28px rgba(52,81,178,0.40);
  --shadow-glow-orange: 0 0 0 4px rgba(255,140,66,0.20),  0 0 28px rgba(255,140,66,0.35);

  /* ---- Motion ---- */
  --dur-instant: 100ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
  --dur-slower:  500ms;
  --dur-page:    420ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  /* ---- Z-index ---- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --lesson-max:    680px;  /* оптимальная ширина reading/тренировки */
}

/* ---- Responsive type scale (mobile-first) ---- */
@media (min-width: 768px) {
  :root {
    --fs-display: 56px;
    --fs-h1:      44px;
    --fs-h2:      32px;
    --fs-h3:      24px;
  }
}

/* ---- Base reset & body ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

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

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}