/* Дизайн-токени напряму "Midnight Play" — M3_DESIGN_SYSTEM.md */
:root {
  color-scheme: dark; /* нативні елементи (скролбар, dialog, select) теж темні */

  --bg-canvas: #100C1D;
  --bg-surface: #1B1430;
  --bg-surface-raised: #261C42;

  --brand-primary: #9D5CFF;
  --brand-primary-hover: #B986FF;

  --accent-coral: #FF6B7A;
  --accent-mint: #57D6B4;

  --text-primary: #FAF7FF;
  --text-secondary: #B9B0CC;

  --border-subtle: #3A2D57;
  --state-error: #FF7186;

  /*
   * Похідні токени (не змінюють палітру M3, лише закривають прогалини доступності; співвідношення — WCAG 2.x):
   *  --text-on-accent: темний текст на фіолетовому/коралловому/м'ятному фоні. Світлий на #9D5CFF дає лише 3.66:1
   *    (потрібно 4.5:1), темний — 4.95:1 (фіолетовий), 6.99:1 (корал), 10.7:1 (м'ята).
   *  --border-control: межа полів і кнопок — 3.85:1 до surface і 3.45:1 до raised (потрібно 3:1 для елементів
   *    керування); --border-subtle 1.4–1.5:1 лишається лише для розділювачів.
   */
  --text-on-accent: var(--bg-canvas);
  --border-control: #7C6E9E;
  --focus-ring: var(--text-primary);

  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* DM Serif Display не має кирилиці — для неї береться Playfair Display (див. fonts.css), далі системний serif */
  --font-display: "DM Serif Display", "Playfair Display", Georgia, "Times New Roman", serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;

  --radius-card: 18px; /* 16-20px — M3 Design System, Game Card */
  --radius-control: 12px;
  --radius-pill: 999px;

  --tap-target: 44px; /* M3: мінімальна ціль дотику */
  --container-max: 1200px;
  --reading-max: 720px;
  --form-max: 480px;
  --game-max: 640px; /* центральна колонка гри на планшеті/десктопі */

  /* Глибина й сяйво — стримано (M3: "playful restraint") */
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
  --glow-primary: 0 8px 24px rgba(157, 92, 255, 0.28);
}