/* ============================================================
   tickettur.uz — design tokens v2 (полный редизайн 2026)
   Тёмная премиальная тема: фирменный фиолетовый сохранён,
   добавлены неоновые градиенты, стеклянные поверхности.
   ============================================================ */
:root {
  /* ===== BRAND ===== */
  --color-primary: #7828AB;
  --color-primary-hover: #8B36C0;
  --color-primary-active: #621F8C;
  --color-primary-soft: rgba(120, 40, 171, 0.14);
  --color-accent: #B44FD4;
  --color-neon: #9D4EC4;

  --grad-brand: linear-gradient(135deg, #7828AB 0%, #B44FD4 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(120,40,171,.25), rgba(180,79,212,.12));
  --grad-text: linear-gradient(92deg, #E0C4F0 0%, #B44FD4 50%, #7828AB 100%);

  /* ===== SURFACES (dark) ===== */
  --color-bg: #0B0B12;
  --color-bg-subtle: #111019;
  --color-surface: #16151F;
  --color-surface-2: #1D1B29;
  --color-surface-glass: rgba(24, 22, 36, 0.66);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-black: #0B0B12;
  --color-white: #FFFFFF;

  /* ===== TEXT ===== */
  --color-text: #F4F2FB;
  --color-text-secondary: #A8A4BC;
  --color-text-muted: #6E6A82;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-dark: #FFFFFF;

  /* ===== STATES ===== */
  --color-success: #34D399;
  --color-error: #F87171;
  --color-warning: #FBBF24;
  --color-info: #60A5FA;
  --color-overlay: rgba(5, 4, 10, 0.72);

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --font-family-base: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;

  --fs-h1: 46px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 15px;
  --fs-small: 13.5px;
  --fs-caption: 12px;

  --lh-tight: 1.15;
  --lh-base: 1.55;

  /* ===== SPACING ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;

  /* ===== RADIUS ===== */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ===== SHADOWS / GLOW ===== */
  --shadow-card: 0 6px 28px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 14px 44px rgba(120, 40, 171, 0.32);
  --shadow-header: 0 6px 24px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6);
  --glow-primary: 0 0 32px rgba(120, 40, 171, 0.45);

  /* ===== LAYOUT ===== */
  --container-max: 1280px;
  --container-pad-desktop: 24px;
  --container-pad-mobile: 16px;
  --header-h: 68px;

  /* ===== Z-INDEX ===== */
  --z-header: 100;
  --z-dropdown: 200;
  --z-sticky-cta: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ===== MOTION ===== */
  --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== A11Y ===== */
  --focus-ring: 0 0 0 3px rgba(155, 69, 196, 0.5);
  --tap-target-min: 44px;
}

@media (max-width: 639px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 22px;
    --fs-h3: 18px;
    --fs-h4: 16px;
    --header-h: 60px;
  }
}

/* ============================================================
   СВЕТЛАЯ ТЕМА — активируется html[data-theme="light"]
   (по умолчанию тёмная; переключатель в шапке, localStorage tt_theme)
   ============================================================ */
html[data-theme="light"] {
  color-scheme: light;

  --color-primary-soft: rgba(120, 40, 171, 0.10);
  --grad-brand-soft: linear-gradient(135deg, rgba(120,40,171,.14), rgba(180,79,212,.07));
  --grad-text: linear-gradient(92deg, #7828AB 0%, #9D4EC4 50%, #B44FD4 100%);

  /* SURFACES (light) */
  --color-bg: #F6F5FB;
  --color-bg-subtle: #EFEDF7;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1EFF8;
  --color-surface-glass: rgba(255, 255, 255, 0.72);
  --color-border: rgba(23, 18, 44, 0.09);
  --color-border-strong: rgba(23, 18, 44, 0.16);

  /* TEXT */
  --color-text: #17141F;
  --color-text-secondary: #57536B;
  --color-text-muted: #8B87A0;

  --color-neon: #7828AB;
  --color-overlay: rgba(23, 18, 44, 0.45);

  /* SHADOWS */
  --shadow-card: 0 6px 24px rgba(38, 24, 90, 0.08);
  --shadow-card-hover: 0 14px 40px rgba(120, 40, 171, 0.18);
  --shadow-header: 0 6px 22px rgba(38, 24, 90, 0.08);
  --shadow-modal: 0 24px 64px rgba(38, 24, 90, 0.18);
  --glow-primary: 0 8px 28px rgba(120, 40, 171, 0.28);

  --focus-ring: 0 0 0 3px rgba(120, 40, 171, 0.35);
}