/* css/tokens.css — дизайн-токены WebED (единая система отступов, скруглений, переходов).
   Подключается ПОСЛЕ существующих CSS: только добавляет переменные, ничего не перезаписывает. */
:root {
  /* ========== APPLE DESIGN TOKENS (WWDC / FLUID INTERFACES) ========== */
  /* Системный стек шрифтов Apple SF Pro */
  --font-family-apple: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Палитра Apple SF Colors (Light) */
  --apple-blue: #0071e3;
  --apple-blue-hover: #0077ed;
  --apple-blue-tint: rgba(0, 113, 227, 0.08);
  --apple-green: #34c759;
  --apple-green-bg: #eaf8ee;
  --apple-orange: #ff9500;
  --apple-orange-bg: #fff5e6;
  --apple-red: #ff3b30;
  --apple-red-bg: #ffebeb;
  --apple-purple: #af52de;
  --apple-teal: #00c7be;
  --apple-gray: #8e8e93;

  /* Семантические привязки палитры */
  --primary: var(--apple-blue);
  --primary-hover: var(--apple-blue-hover);
  --primary-light: var(--apple-blue-tint);
  --accent: var(--apple-teal);
  --success: var(--apple-green);
  --success-bg: var(--apple-green-bg);
  --warning: var(--apple-orange);
  --warning-bg: var(--apple-orange-bg);
  --danger: var(--apple-red);
  --danger-bg: var(--apple-red-bg);

  /* Apple Neutral Backgrounds & Surfaces (Light) */
  --bg-main: #f5f5f7;
  --bg-alt: #f2f2f7;
  --surface: #ffffff;
  --surface2: #f2f2f7;
  --surface3: #e5e5ea;
  --surface-alt: #f5f5f7;
  --border-light: rgba(0, 0, 0, 0.08);
  --border-focus: #0071e3;

  /* Текст Apple */
  --text-main: #1d1d1f;
  --text-muted: #86868b;
  --text-secondary: #86868b;

  /* Шкала отступов */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Apple Squircles & Скругления */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Переходы и пружинные кривые (Apple Fluid Standards) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press: 120ms;
  --dur-instant: 120ms;
  --dur-fast: 160ms;
  --dur-normal: 200ms;
  --dur-moderate: 240ms;
  --dur-dialog: 240ms;

  --ease-fast: 150ms cubic-bezier(0.23, 1, 0.32, 1);
  --ease-base: 200ms cubic-bezier(0.23, 1, 0.32, 1);

  /* Типографика */
  --font-xs: 11px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-lg: 16px;
  --font-xl: 20px;
  --font-2xl: 26px;

  /* Apple Multi-layer Ambient Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.06);

  /* Материалы Apple Glass */
  --glass-bg: rgba(255, 255, 255, 0.76);
  --glass-border: rgba(0, 0, 0, 0.07);
  --glass-border-top: rgba(255, 255, 255, 0.65);
  --glass-blur: blur(20px) saturate(180%);

  /* Семантические переменные компонентов */
  --modal-bg: #ffffff;
  --modal-text: #1d1d1f;
  --modal-border: rgba(0, 0, 0, 0.08);
  --card-bg: #ffffff;
  --card-text: #1d1d1f;
  --input-bg: #f2f2f7;
  --input-border: rgba(0, 0, 0, 0.08);
  --input-text: #1d1d1f;
}

[data-theme="dark"],
:root[data-theme="dark"],
body.theme-dark,
[data-theme="dark"] body {
  /* Apple SF Colors (Dark) */
  --apple-blue: #0a84ff;
  --apple-blue-hover: #409cff;
  --apple-blue-tint: rgba(10, 132, 255, 0.15);
  --apple-green: #30d158;
  --apple-green-bg: rgba(48, 209, 88, 0.15);
  --apple-orange: #ff9f0a;
  --apple-orange-bg: rgba(255, 159, 10, 0.15);
  --apple-red: #ff453a;
  --apple-red-bg: rgba(255, 69, 58, 0.15);
  --apple-purple: #bf5af2;
  --apple-teal: #00c7be;
  --apple-gray: #98989d;

  --primary: var(--apple-blue);
  --primary-hover: var(--apple-blue-hover);
  --primary-light: var(--apple-blue-tint);
  --accent: var(--apple-teal);
  --success: var(--apple-green);
  --success-bg: var(--apple-green-bg);
  --warning: var(--apple-orange);
  --warning-bg: var(--apple-orange-bg);
  --danger: var(--apple-red);
  --danger-bg: var(--apple-red-bg);

  /* Deep Apple Dark Mode Backgrounds & Surfaces */
  --bg-main: #000000;
  --bg-alt: #121214;
  --surface: #1c1c1e;
  --surface2: #2c2c2e;
  --surface3: #3a3a3c;
  --surface-alt: #1c1c1e;
  --border-light: rgba(255, 255, 255, 0.12);
  --border-focus: #0a84ff;

  /* Текст Apple Dark */
  --text-main: #f5f5f7;
  --text-muted: #86868b;
  --text-secondary: #86868b;

  /* Тени Apple Dark */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 28px 72px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.15);

  /* Материалы Apple Glass Dark */
  --glass-bg: rgba(28, 28, 30, 0.82);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-top: rgba(255, 255, 255, 0.15);
  --glass-blur: blur(20px) saturate(190%);

  --modal-bg: #1c1c1e;
  --modal-text: #f5f5f7;
  --modal-border: rgba(255, 255, 255, 0.14);
  --card-bg: #1c1c1e;
  --card-text: #f5f5f7;
  --input-bg: #2c2c2e;
  --input-border: rgba(255, 255, 255, 0.14);
  --input-text: #f5f5f7;
}

/* ========== MATH FRACTION RENDERING (GLOBAL) ========== */
.math-frac {
  display: inline-flex !important;
  flex-direction: column !important;
  vertical-align: middle !important;
  text-align: center !important;
  padding: 0 0.22em !important;
  font-size: 1.12em !important;
  line-height: 1 !important;
  position: relative !important;
  top: -0.1em !important;
}
.math-num {
  display: block !important;
  font-size: 0.9em !important;
  line-height: 1.15 !important;
  padding: 0 0.12em 0.08em 0.12em !important;
  border-bottom: 1.4px solid currentColor !important;
}
.math-den {
  display: block !important;
  font-size: 0.9em !important;
  line-height: 1.15 !important;
  padding: 0.08em 0.12em 0 0.12em !important;
}
.math-mixed {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.18em !important;
  vertical-align: middle !important;
}

/* ========== TACTILE FEEDBACK & BUTTON CRAFT (EMIL KOWALSKI) ========== */
/* Все интерактивные элементы подтверждают физический клик микросжатием scale(0.97) */
.btn, button, .clickable, .nav-item, .tab, .topbar-icon-btn, .cal-slot-free, .exam-opt-pill, .exam-cat-pill, .topic-filter-pill {
  transition: transform var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              background-color var(--dur-fast, 160ms) ease,
              border-color var(--dur-fast, 160ms) ease,
              box-shadow var(--dur-fast, 160ms) ease;
}

.btn:active,
button:active,
.clickable:active,
.nav-item:active,
.tab:active,
.topbar-icon-btn:active,
.cal-slot-free:active,
.exam-opt-pill:active,
.exam-cat-pill:active,
.topic-filter-pill:active {
  transform: scale(0.97) !important;
}

/* Popover & Dropdown origin awareness */
.dropdown-menu, .popover, .action-menu {
  transform-origin: var(--transform-origin, top right);
}

/* Модальные окна масштабируются из центра */
.modal, .modal-dialog, .modal-content {
  transform-origin: center center;
}

/* ========== GLOBAL APPLE DESIGN STYLING (FLUID INTERFACES) ========== */

/* 1. Базовая типографика и фон Apple */
body {
  font-family: var(--font-family-apple, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  background-color: var(--bg-main, #f5f5f7) !important;
  color: var(--text-main, #1d1d1f) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font-family: inherit !important;
}

/* 2. Оптический трекинг шрифтов (Optical Letter-Spacing) */
h1, h2, .page-title, .modal-title, .header-title {
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
}

h3, h4, .section-title, .card-title {
  letter-spacing: -0.015em !important;
  font-weight: 600 !important;
}

/* Мелкие подписи и бейджи: легкий положительный трекинг для четкости */
.badge, .tag, .stat-label, .cal-time-chip, .exam-opt-pill, .topic-filter-pill, .chip {
  letter-spacing: 0.025em !important;
  font-weight: 600 !important;
}

/* 3. Парящий хром и материалы Apple Glass */
.topbar, .app-header, .header-nav, .floating-toolbar, .cal-selection-bar {
  background: var(--glass-bg, rgba(255, 255, 255, 0.76));
  backdrop-filter: var(--glass-blur, blur(20px));
  -webkit-backdrop-filter: var(--glass-blur, blur(20px));
  border-bottom: 1px solid var(--glass-border, rgba(0, 0, 0, 0.07));
  border-top: 1px solid var(--glass-border-top, rgba(255, 255, 255, 0.65));
}

/* 4. Apple Squircles для карточек */
.card, .stat-card, .lesson-item, .hw-item, .test-card, .profile-card, .exam-card {
  border-radius: var(--radius-lg, 18px) !important;
  background: var(--card-bg, #ffffff) !important;
  border: 1px solid var(--border-light, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.04)) !important;
  transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out),
              box-shadow var(--dur-normal, 200ms) ease,
              border-color var(--dur-normal, 200ms) ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover, .stat-card:hover, .lesson-item:hover, .exam-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.06)) !important;
  }
}

/* 5. Кнопки в стиле Apple SF */
.btn-primary, .btn-submit, button[type="submit"] {
  background: var(--apple-blue, #0071e3) !important;
  color: #ffffff !important;
  border-radius: var(--radius-sm, 10px) !important;
  border: none !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0, 113, 227, 0.25) !important;
}

.btn-secondary, .btn-outline {
  background: var(--primary-light, rgba(0, 113, 227, 0.08)) !important;
  color: var(--primary, #0071e3) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm, 10px) !important;
  font-weight: 500 !important;
}

/* 6. Модальные окна: Apple Sheet & Dim to Focus */
.modal-overlay, .modal-backdrop {
  background: rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.modal-content, .modal-dialog {
  border-radius: var(--radius-xl, 24px) !important;
  background: var(--modal-bg) !important;
  border: 1px solid var(--modal-border) !important;
  box-shadow: var(--shadow-modal) !important;
}

/* 7. Поля ввода (Inputs) в стиле Apple */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
  border-radius: var(--radius-sm, 10px) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
  font-family: inherit !important;
  transition: border-color var(--dur-fast, 160ms) ease, box-shadow var(--dur-fast, 160ms) ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.22) !important;
  outline: none !important;
}

/* ========== ACCESSIBILITY & PREFERS-REDUCED-MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.08s !important;
    scroll-behavior: auto !important;
  }
}