/* =============================================================
   Master-Quiz Design System — Unified Tokens
   v2 — single source of truth + back-compat aliases for 6 sub-systems
   =============================================================
   DROP THIS FILE IN FIRST, before any legacy CSS.
   Nothing will break: every legacy var (--primary, --wb-*, --wl-*,
   --cp-*, --qp-*, --ts-*, --landing-*) is aliased back to an --mq-* root.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ========================================================
     1. BRAND / PRIMARY
     ======================================================== */
  --mq-primary:         #6366f1;
  --mq-primary-dark:    #4f46e5;
  --mq-primary-light:   #818cf8;

  --mq-secondary:       #ec4899;
  --mq-secondary-dark:  #db2777;

  --mq-accent:          #f59e0b;
  --mq-accent-dark:     #d97706;

  --mq-orange:          #ff9500;   /* landing CTA orange */
  --mq-orange-dark:     #ff7b00;

  /* ========================================================
     2. SIGNATURE GRADIENTS
     ======================================================== */
  --mq-grad-start:      #667eea;
  --mq-grad-mid:        #764ba2;
  --mq-grad-end:        #9d50bb;

  --mq-gradient-main:    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --mq-gradient-hero:    linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  --mq-gradient-landing: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #9d50bb 100%);
  --mq-gradient-button:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --mq-gradient-cta:     linear-gradient(135deg, #ff9500 0%, #ff7b00 100%);
  --mq-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --mq-gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --mq-gradient-card:    linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);

  /* Category gradients */
  --mq-grad-purple: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  --mq-grad-blue:   linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --mq-grad-green:  linear-gradient(135deg, #10b981 0%, #059669 100%);
  --mq-grad-orange: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --mq-grad-pink:   linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  --mq-grad-teal:   linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  --mq-grad-indigo: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --mq-grad-amber:  linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --mq-grad-red:    linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

  /* ========================================================
     3. NEUTRALS
     ======================================================== */
  --mq-white:    #ffffff;
  --mq-black:    #000000;
  --mq-gray-50:  #f9fafb;
  --mq-gray-100: #f3f4f6;
  --mq-gray-200: #e5e7eb;
  --mq-gray-300: #d1d5db;
  --mq-gray-400: #9ca3af;
  --mq-gray-500: #6b7280;
  --mq-gray-600: #4b5563;
  --mq-gray-700: #374151;
  --mq-gray-800: #1f2937;
  --mq-gray-900: #111827;
  --mq-ink:      #1a1a2e;  /* deep ink — hero copy on light */

  /* ========================================================
     4. SEMANTIC FG/BG
     ======================================================== */
  --mq-fg-1:       var(--mq-gray-900);
  --mq-fg-2:       var(--mq-gray-600);
  --mq-fg-3:       var(--mq-gray-400);
  --mq-fg-on-grad: var(--mq-white);

  --mq-bg-app:     var(--mq-gradient-main);
  --mq-bg-surface: var(--mq-white);
  --mq-bg-subtle:  var(--mq-gray-50);
  --mq-bg-muted:   var(--mq-gray-100);
  --mq-border:     var(--mq-gray-200);
  --mq-border-soft: rgba(0, 0, 0, 0.05);
  --mq-border-on-dark: rgba(255, 255, 255, 0.2);

  /* ========================================================
     5. STATE / SEMANTIC
     ======================================================== */
  --mq-success: #10b981;  --mq-success-light: #d1fae5;  --mq-success-dark: #065f46;
  --mq-error:   #ef4444;  --mq-error-light:   #fee2e2;  --mq-error-dark:   #991b1b;
  --mq-warning: #f59e0b;  --mq-warning-light: #fef3c7;  --mq-warning-dark: #78350f;
  --mq-info:    #3b82f6;  --mq-info-light:    #dbeafe;  --mq-info-dark:    #1e3a8a;
  --mq-danger:  #ef4444;  /* alias */

  /* ========================================================
     6. TYPOGRAPHY
     ======================================================== */
  --mq-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mq-font-mono: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;

  --mq-text-display: clamp(2.5rem, 8vw, 5rem);
  --mq-text-h1:      clamp(2rem, 6vw, 3.5rem);
  --mq-text-h2:      clamp(1.75rem, 5vw, 2.5rem);
  --mq-text-h3:      1.5rem;
  --mq-text-h4:      1.25rem;
  --mq-text-lead:    clamp(1rem, 2.5vw, 1.375rem);
  --mq-text-body:    1rem;
  --mq-text-small:   0.9375rem;
  --mq-text-xs:      0.8125rem;

  --mq-weight-regular: 400;
  --mq-weight-medium:  500;
  --mq-weight-semi:    600;
  --mq-weight-bold:    700;
  --mq-weight-extra:   800;
  --mq-weight-black:   900;

  --mq-tracking-tight: -0.03em;
  --mq-tracking-snug:  -0.02em;
  --mq-tracking-body:  -0.01em;
  --mq-leading-tight:  1.1;
  --mq-leading-snug:   1.3;
  --mq-leading-body:   1.6;
  --mq-leading-loose:  1.8;

  /* ========================================================
     7. RADIUS
     ======================================================== */
  --mq-radius-xs:   6px;
  --mq-radius-sm:   8px;
  --mq-radius-md:   12px;
  --mq-radius-btn:  14px;   /* standard button */
  --mq-radius-lg:   16px;
  --mq-radius-card: 20px;   /* most common card */
  --mq-radius-xl:   24px;
  --mq-radius-2xl:  32px;
  --mq-radius-full: 9999px;
  --mq-radius-pill: 50px;

  /* ========================================================
     8. SHADOWS
     ======================================================== */
  --mq-shadow-sm:         0 1px 2px 0 rgba(0,0,0,0.05);
  --mq-shadow:            0 4px 6px -1px rgba(0,0,0,0.1);
  --mq-shadow-md:         0 10px 15px -3px rgba(0,0,0,0.1);
  --mq-shadow-lg:         0 20px 25px -5px rgba(0,0,0,0.1);
  --mq-shadow-xl:         0 25px 50px -12px rgba(0,0,0,0.25);
  --mq-shadow-colored:    0 10px 40px rgba(102,126,234,0.30);
  --mq-shadow-cta:        0 4px 15px rgba(255,149,0,0.40);
  --mq-shadow-cta-hover:  0 6px 25px rgba(255,149,0,0.50);
  --mq-shadow-card:       0 4px 20px rgba(0,0,0,0.08);
  --mq-shadow-card-hover: 0 8px 40px rgba(0,0,0,0.12);
  --mq-shadow-focus:      0 0 0 3px rgba(99,102,241,0.35);

  /* ========================================================
     9. SPACING
     ======================================================== */
  --mq-space-0:   0;
  --mq-space-2xs: 0.25rem;
  --mq-space-xs:  0.5rem;
  --mq-space-sm:  0.75rem;
  --mq-space-md:  1rem;
  --mq-space-lg:  1.5rem;
  --mq-space-xl:  2rem;
  --mq-space-2xl: 3rem;
  --mq-space-3xl: 4rem;
  --mq-space-4xl: 6rem;

  /* ========================================================
     10. MOTION
     ======================================================== */
  --mq-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --mq-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --mq-ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --mq-dur-fast:   150ms;
  --mq-dur-base:   300ms;
  --mq-dur-slow:   500ms;
  --mq-transition-fast: 150ms var(--mq-ease);
  --mq-transition-base: 300ms var(--mq-ease);
  --mq-transition-slow: 500ms var(--mq-ease);

  /* ========================================================
     11. Z-INDEX LAYERS
     ======================================================== */
  --mq-z-base:     0;
  --mq-z-raised:   10;
  --mq-z-sticky:   100;
  --mq-z-dropdown: 1000;
  --mq-z-modal:    10000;
  --mq-z-toast:    10100;
  --mq-z-tooltip:  10200;

  /* ========================================================
     12. GLASS SURFACES (canonicalized — used by ghost btn,
         pin display, timer, modal backdrop; new components
         below should consume these tokens directly)
     ======================================================== */
  --mq-glass-bg:            rgba(255, 255, 255, 0.10);
  --mq-glass-bg-strong:     rgba(255, 255, 255, 0.18);
  --mq-glass-border:        rgba(255, 255, 255, 0.18);
  --mq-glass-border-strong: rgba(255, 255, 255, 0.40);
  --mq-glass-blur:          blur(20px);
  --mq-glass-blur-soft:     blur(10px);


  /* =============================================================
     ============= BACK-COMPAT ALIASES (DO NOT REMOVE YET) ========
     =============================================================
     These keep every existing selector in the codebase working.
     Remove an alias only AFTER the last reference to it is gone.
     Use scripts/check-legacy-vars.sh to audit.
     ============================================================= */

  /* ---- Core app (style.css) — no prefix, 75 vars ---- */
  --primary:        var(--mq-primary);
  --primary-dark:   var(--mq-primary-dark);
  --primary-light:  var(--mq-primary-light);
  --secondary:      var(--mq-secondary);
  --secondary-dark: var(--mq-secondary-dark);
  --accent:         var(--mq-accent);

  --gradient-main:    var(--mq-gradient-main);
  --gradient-hero:    var(--mq-gradient-hero);
  --gradient-success: var(--mq-gradient-success);
  --gradient-warning: var(--mq-gradient-warning);
  --gradient-card:    var(--mq-gradient-card);
  --gradient-button:  var(--mq-gradient-button);

  --white:   var(--mq-white);
  --black:   var(--mq-black);
  --gray-50:  var(--mq-gray-50);
  --gray-100: var(--mq-gray-100);
  --gray-200: var(--mq-gray-200);
  --gray-300: var(--mq-gray-300);
  --gray-400: var(--mq-gray-400);
  --gray-500: var(--mq-gray-500);
  --gray-600: var(--mq-gray-600);
  --gray-700: var(--mq-gray-700);
  --gray-800: var(--mq-gray-800);
  --gray-900: var(--mq-gray-900);

  --success: var(--mq-success); --success-light: var(--mq-success-light); --success-dark: var(--mq-success-dark);
  --error:   var(--mq-error);   --error-light:   var(--mq-error-light);   --error-dark:   var(--mq-error-dark);
  --warning: var(--mq-warning); --warning-light: var(--mq-warning-light); --warning-dark: var(--mq-warning-dark);
  --info:    var(--mq-info);    --info-light:    var(--mq-info-light);    --info-dark:    var(--mq-info-dark);

  --shadow-sm:      var(--mq-shadow-sm);
  --shadow:         var(--mq-shadow);
  --shadow-md:      var(--mq-shadow-md);
  --shadow-lg:      var(--mq-shadow-lg);
  --shadow-xl:      var(--mq-shadow-xl);
  --shadow-colored: var(--mq-shadow-colored);

  --radius-sm:   var(--mq-radius-sm);
  --radius-md:   var(--mq-radius-md);
  --radius-lg:   var(--mq-radius-lg);
  --radius-xl:   var(--mq-radius-xl);
  --radius-full: var(--mq-radius-full);

  --transition-fast: var(--mq-transition-fast);
  --transition-base: var(--mq-transition-base);
  --transition-slow: var(--mq-transition-slow);

  --spacing-xs:  var(--mq-space-xs);
  --spacing-sm:  var(--mq-space-sm);
  --spacing-md:  var(--mq-space-md);
  --spacing-lg:  var(--mq-space-lg);
  --spacing-xl:  var(--mq-space-xl);
  --spacing-2xl: var(--mq-space-2xl);
  --spacing-3xl: var(--mq-space-3xl);

  /* Late-stage app vars (style.original.css:3876+) */
  --primary-purple:       var(--mq-primary);
  --primary-purple-dark:  var(--mq-primary-dark);
  --primary-purple-light: var(--mq-primary-light);
  --accent-orange:        #f97316;
  --accent-orange-light:  #fb923c;
  --accent-orange-dark:   #ea580c;
  --accent-gradient:      linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);

  /* ---- Widget Builder (--wb-*) ---- */
  --wb-primary:       var(--mq-primary);
  --wb-primary-dark:  var(--mq-primary-dark);
  --wb-primary-light: var(--mq-primary-light);
  --wb-bg:            var(--mq-bg-subtle);
  --wb-panel:         var(--mq-bg-surface);
  --wb-border:        var(--mq-border);
  --wb-text:          var(--mq-gray-900);
  --wb-text-sec:      var(--mq-gray-500);
  --wb-text-muted:    var(--mq-gray-400);
  --wb-radius:        10px;
  --wb-shadow:        var(--mq-shadow-sm);
  --wb-font:          var(--mq-font-sans);

  /* ---- Widgets Landing (--wl-*) ---- */
  --wl-primary:        var(--mq-primary);
  --wl-primary-dark:   var(--mq-primary-dark);
  --wl-primary-light:  var(--mq-primary-light);
  --wl-gradient:       var(--mq-gradient-button);
  --wl-gradient-hero:  linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  --wl-shadow-sm:      var(--mq-shadow-sm);
  --wl-shadow-md:      var(--mq-shadow);
  --wl-shadow-lg:      var(--mq-shadow-md);
  --wl-shadow-xl:      var(--mq-shadow-lg);
  --wl-radius-sm:      var(--mq-radius-sm);
  --wl-radius-md:      var(--mq-radius-md);
  --wl-radius-lg:      var(--mq-radius-lg);
  --wl-radius-xl:      var(--mq-radius-xl);
  --wl-font:           var(--mq-font-sans);

  /* ---- Chat Preview (--cp-*) ---- */
  --cp-primary:    #2563eb;              /* kept — different blue */
  --cp-bg:         var(--mq-bg-subtle);
  --cp-panel:      var(--mq-bg-surface);
  --cp-border:     var(--mq-border);
  --cp-text:       var(--mq-gray-900);
  --cp-text-sec:   var(--mq-gray-500);
  --cp-text-muted: var(--mq-gray-400);
  --cp-radius:     10px;
  --cp-font:       var(--mq-font-sans);

  /* ---- Quiz Preview (--qp-*) ---- */
  --qp-primary:    var(--mq-primary);
  --qp-bg:         var(--mq-bg-subtle);
  --qp-panel:      var(--mq-bg-surface);
  --qp-border:     var(--mq-border);
  --qp-text:       var(--mq-gray-900);
  --qp-text-sec:   var(--mq-gray-500);
  --qp-text-muted: var(--mq-gray-400);
  --qp-radius:     10px;
  --qp-font:       var(--mq-font-sans);

  /* ---- Topic Selector (--ts-*) ---- */
  --ts-gradient-start: var(--mq-grad-start);
  --ts-gradient-mid:   var(--mq-grad-mid);
  --ts-gradient-end:   var(--mq-grad-end);
  --ts-orange:         var(--mq-orange);
  --ts-orange-hover:   var(--mq-orange-dark);
  --ts-white:          var(--mq-white);
  --ts-text-dark:      var(--mq-ink);
  --ts-text-muted:     var(--mq-gray-500);
  --ts-success:        var(--mq-success);
  --ts-danger:         var(--mq-error);
  --ts-bg-overlay:     rgba(0, 0, 0, 0.85);
  --ts-bg-card:        rgba(255, 255, 255, 0.95);
  --ts-bg-dark:        #1e1b4b;
  --ts-border:         var(--mq-border-on-dark);
  --ts-shadow:         var(--mq-shadow-card);
  --ts-shadow-hover:   var(--mq-shadow-card-hover);
  --ts-shadow-orange:  var(--mq-shadow-cta);
  --ts-radius:         var(--mq-radius-xl);
  --ts-radius-md:      var(--mq-radius-card);
  --ts-radius-sm:      var(--mq-radius-btn);
  --ts-radius-pill:    var(--mq-radius-pill);
  --ts-transition:     var(--mq-transition-base);

  /* ---- Landing (--landing-*) ---- */
  --landing-gradient-start:   var(--mq-grad-start);
  --landing-gradient-mid:     var(--mq-grad-mid);
  --landing-gradient-end:     var(--mq-grad-end);
  --landing-orange:           var(--mq-orange);
  --landing-orange-hover:     var(--mq-orange-dark);
  --landing-white:            var(--mq-white);
  --landing-text-dark:        var(--mq-ink);
  --landing-text-muted:       var(--mq-gray-500);
  --landing-card-shadow:      var(--mq-shadow-card);
  --landing-card-shadow-hover:var(--mq-shadow-card-hover);
}

/* =============================================================
   SEMANTIC DEFAULTS (applied to html/body)
   These only touch font/color — backgrounds stay with legacy CSS
   so swapping tokens in doesn't paint over any page.
   ============================================================= */
html, body {
  font-family: var(--mq-font-sans);
  color: var(--mq-fg-1);
  line-height: var(--mq-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* iOS Safari: body alone не сдерживает horizontal scroll, если у потомков fixed+transform */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
#app, .main-content {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Optional utility classes — opt-in, don't affect untagged markup */
.mq-display { font-size: var(--mq-text-display); font-weight: var(--mq-weight-black); line-height: var(--mq-leading-tight); letter-spacing: var(--mq-tracking-tight); }
.mq-h1      { font-size: var(--mq-text-h1); font-weight: var(--mq-weight-extra); line-height: var(--mq-leading-tight); letter-spacing: var(--mq-tracking-tight); }
.mq-h2      { font-size: var(--mq-text-h2); font-weight: var(--mq-weight-extra); line-height: 1.2; letter-spacing: var(--mq-tracking-snug); }
.mq-h3      { font-size: var(--mq-text-h3); font-weight: var(--mq-weight-bold); line-height: var(--mq-leading-snug); }
.mq-h4      { font-size: var(--mq-text-h4); font-weight: var(--mq-weight-bold); line-height: var(--mq-leading-snug); }
.mq-body    { font-size: var(--mq-text-body); line-height: var(--mq-leading-body); color: var(--mq-fg-2); }
.mq-lead    { font-size: var(--mq-text-lead); line-height: var(--mq-leading-body); color: var(--mq-fg-2); }
.mq-small   { font-size: var(--mq-text-small); }
.mq-xs      { font-size: var(--mq-text-xs); }
.mq-mono    { font-family: var(--mq-font-mono); letter-spacing: 0.1em; }
.mq-pin     { font-family: var(--mq-font-mono); font-weight: 900; letter-spacing: 0.5rem; }

.mq-gradient-text {
  background: var(--mq-gradient-button);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mq-gradient-text-warm {
  background: linear-gradient(135deg,#fbbf24 0%,#f59e0b 50%,#fb923c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}