/* ============================================================
   DESIGN_QG - токены платформы QazaqGaz
   Сгенерировано из фирменных цветов логотипа QAZAQGAZ:
   #3050F0 (знак и начертание) -> #36C1DE (конец градиента пламени),
   #00A8F0 (подпись «Ұлттық компаниясы»).
   Шкалы построены в HSL ровными ступенями светлоты.
   ============================================================ */

:root {
  /* ---------- 1. Палитра: фирменные шкалы ---------- */
  --qg-brand-900: #07165F;
  --qg-brand-800: #0A1E85;
  --qg-brand-700: #0C27AB;
  --qg-brand-600: #0F31D6;
  --qg-brand-500: #3050F0;
  --qg-brand-400: #5972F3;
  --qg-brand-300: #8396F6;
  --qg-brand-200: #B3BFF9;
  --qg-brand-100: #D4DBFC;
  --qg-brand-50: #ECEFFE;

  --qg-cyan-900: #004766;
  --qg-cyan-800: #00648F;
  --qg-cyan-700: #0081B8;
  --qg-cyan-600: #00A1E6;
  --qg-cyan-500: #00A8F0;
  --qg-cyan-400: #4DC9FF;
  --qg-cyan-300: #7AD7FF;
  --qg-cyan-200: #ADE7FF;
  --qg-cyan-100: #D1F1FF;
  --qg-cyan-50: #EBF9FF;

  --qg-aqua-900: #0E4B58;
  --qg-aqua-800: #146A7B;
  --qg-aqua-700: #1A889E;
  --qg-aqua-600: #20AAC5;
  --qg-aqua-500: #36C1DE;
  --qg-aqua-400: #65D1E6;
  --qg-aqua-300: #8DDDEC;
  --qg-aqua-200: #B9EAF4;
  --qg-aqua-100: #D8F3F9;
  --qg-aqua-50: #EDFAFC;

  --qg-amber-900: #5E4108;
  --qg-amber-800: #845C0B;
  --qg-amber-700: #AA760E;
  --qg-amber-600: #D49311;
  --qg-amber-500: #EEB032;
  --qg-amber-400: #F2BF5A;
  --qg-amber-300: #F5CF84;
  --qg-amber-200: #F9E2B4;
  --qg-amber-100: #FCEFD5;
  --qg-amber-50: #FDF8EC;

  --qg-violet-900: #2C1B4B;
  --qg-violet-800: #3D2669;
  --qg-violet-700: #4F3187;
  --qg-violet-600: #633DA9;
  --qg-violet-500: #805CC4;
  --qg-violet-400: #997CD0;
  --qg-violet-300: #B39EDC;
  --qg-violet-200: #D0C3E9;
  --qg-violet-100: #E5DDF3;
  --qg-violet-50: #F3F0FA;

  --qg-green-900: #1E4832;
  --qg-green-800: #296545;
  --qg-green-700: #358259;
  --qg-green-600: #43A370;
  --qg-green-500: #61BF8D;
  --qg-green-400: #80CBA3;
  --qg-green-300: #A1D9BB;
  --qg-green-200: #C5E7D5;
  --qg-green-100: #DEF2E7;
  --qg-green-50: #F1F9F5;

  --qg-rose-900: #521419;
  --qg-rose-800: #731C23;
  --qg-rose-700: #94242D;
  --qg-rose-600: #B92D38;
  --qg-rose-500: #D44C58;
  --qg-rose-400: #DC6F78;
  --qg-rose-300: #E5949B;
  --qg-rose-200: #EFBDC1;
  --qg-rose-100: #F6DADC;
  --qg-rose-50: #FBEFF0;

  --qg-neutral-950: #171B23;
  --qg-neutral-900: #2B303B;
  --qg-neutral-800: #3C4453;
  --qg-neutral-700: #4D576A;
  --qg-neutral-600: #606D85;
  --qg-neutral-500: #7E8AA2;
  --qg-neutral-400: #97A1B4;
  --qg-neutral-300: #B2B9C7;
  --qg-neutral-200: #D0D4DD;
  --qg-neutral-100: #E4E7EC;
  --qg-neutral-50: #F3F4F6;
  --qg-neutral-25: #FBFBFC;
  --qg-neutral-0: #FFFFFF;

  /* ---------- 2. Семантика: светлая тема ---------- */
  --qg-bg:              var(--qg-neutral-25);
  --qg-surface:         var(--qg-neutral-0);
  --qg-surface-sunken:  var(--qg-neutral-50);
  --qg-surface-popover: var(--qg-neutral-0);
  --qg-backdrop:        rgb(23 27 35 / 40%);

  --qg-text:            var(--qg-neutral-900);
  --qg-text-secondary:  var(--qg-neutral-700);
  --qg-text-muted:      var(--qg-neutral-600);
  --qg-text-subtle:     var(--qg-neutral-500);
  --qg-text-inverse:    var(--qg-neutral-0);
  --qg-text-accent:     var(--qg-brand-600);

  --qg-border:          var(--qg-neutral-100);
  --qg-border-strong:   var(--qg-neutral-200);
  --qg-border-accent:   var(--qg-brand-200);

  --qg-accent:          var(--qg-brand-500);
  --qg-accent-hover:    var(--qg-brand-600);
  --qg-accent-quiet:    var(--qg-brand-50);
  --qg-accent-chip:     var(--qg-brand-100);
  --qg-focus:           var(--qg-brand-500);

  --qg-ok:              var(--qg-green-700);
  --qg-ok-bg:           var(--qg-green-50);
  --qg-warn:            var(--qg-amber-800);
  --qg-warn-bg:         var(--qg-amber-50);
  --qg-bad:             var(--qg-rose-600);
  --qg-bad-bg:          var(--qg-rose-50);

  /* ---------- 3. Графики ---------- */
  --qg-chart-1: #3050F0;  /* фирменный синий - главная серия */
  --qg-chart-2: #AA760E;
  --qg-chart-3: #1A889E;
  --qg-chart-4: #633DA9;
  --qg-chart-5: #43A370;
  --qg-chart-6: #B92D38;
  --qg-chart-7: #0081B8;
  --qg-chart-8: #606D85;
  --qg-chart-muted:     var(--qg-neutral-300);
  --qg-chart-grid:      var(--qg-neutral-100);
  --qg-chart-axis:      var(--qg-neutral-200);
  --qg-chart-reference: var(--qg-neutral-400);
  --qg-chart-status-good:     var(--qg-green-600);
  --qg-chart-status-warning:  var(--qg-amber-500);
  --qg-chart-status-serious:  var(--qg-amber-700);
  --qg-chart-status-critical: var(--qg-rose-600);

  /* ---------- 4. Типографика ---------- */
  --qg-font-sans: "Segoe UI", Inter, ui-sans-serif, system-ui, Roboto, Arial, sans-serif;
  --qg-font-mono: "Cascadia Mono", ui-monospace, Consolas, monospace;
  --qg-font-size-caption: 0.75rem;   /* 12px - подписи, оси, сноски */
  --qg-font-size-body:    0.875rem;  /* 14px - основной текст, таблицы */
  --qg-font-size-heading: 1rem;      /* 16px - заголовки карточек */
  --qg-font-size-title:   1.375rem;  /* 22px - заголовок раздела */
  --qg-font-size-display: 2.25rem;   /* 36px - главная цифра */
  --qg-font-weight-regular:  400;
  --qg-font-weight-medium:   500;
  --qg-font-weight-semibold: 600;
  --qg-font-weight-bold:     700;
  --qg-line-tight: 1.2;
  --qg-line-base:  1.5;

  /* ---------- 5. Ритм: отступы, радиусы ---------- */
  --qg-pad-xs: 0.375rem; --qg-pad-sm: 0.5rem;  --qg-pad-md: 0.75rem;
  --qg-pad-lg: 1.25rem;  --qg-pad-xl: 1.75rem;
  --qg-gap-xs: 0.375rem; --qg-gap-sm: 0.5rem;  --qg-gap-md: 1rem;
  --qg-gap-lg: 1.5rem;   --qg-gap-xl: 2.5rem;
  --qg-radius-xs: 0.25rem; --qg-radius-sm: 0.375rem; --qg-radius: 0.625rem;
  --qg-radius-lg: 0.875rem; --qg-radius-full: 999px;
  --qg-gutter: clamp(1rem, 4vw, 2.5rem);

  /* ---------- 6. Тени ---------- */
  --qg-shadow-card:    0 1px 2px rgb(23 27 35 / 6%);
  --qg-shadow-popover: 0 8px 24px rgb(23 27 35 / 12%), 0 2px 6px rgb(23 27 35 / 8%);
  --qg-shadow-modal:   0 24px 60px rgb(23 27 35 / 18%);

  /* ---------- 7. Движение ---------- */
  --qg-dur-fast: 60ms; --qg-dur-snap: 120ms; --qg-dur-base: 200ms; --qg-dur-slow: 450ms;
  --qg-ease-out:       cubic-bezier(0, 0, .2, 1);
  --qg-ease-snap:      cubic-bezier(.32, .72, 0, 1);
  --qg-ease-overshoot: cubic-bezier(.34, 1.3, .64, 1);

  /* ---------- 8. Фирменный градиент ---------- */
  --qg-gradient-flame: linear-gradient(145deg, #3050F0 0%, #00A8F0 55%, #36C1DE 100%);
}

/* ---------- Тёмная тема ---------- */
[data-theme="dark"] {
  --qg-bg:              var(--qg-neutral-950);
  --qg-surface:         var(--qg-neutral-900);
  --qg-surface-sunken:  var(--qg-neutral-950);
  --qg-surface-popover: var(--qg-neutral-800);
  --qg-backdrop:        rgb(0 0 0 / 55%);

  --qg-text:            var(--qg-neutral-50);
  --qg-text-secondary:  var(--qg-neutral-200);
  --qg-text-muted:      var(--qg-neutral-300);
  --qg-text-subtle:     var(--qg-neutral-400);
  --qg-text-inverse:    var(--qg-neutral-950);
  --qg-text-accent:     var(--qg-brand-300);

  --qg-border:          var(--qg-neutral-800);
  --qg-border-strong:   var(--qg-neutral-700);
  --qg-border-accent:   var(--qg-brand-700);

  --qg-accent:          var(--qg-brand-400);
  --qg-accent-hover:    var(--qg-brand-300);
  --qg-accent-quiet:    rgb(48 80 240 / 16%);
  --qg-accent-chip:     rgb(48 80 240 / 24%);
  --qg-focus:           var(--qg-brand-300);

  --qg-ok:              var(--qg-green-300);
  --qg-ok-bg:           rgb(53 130 89 / 20%);
  --qg-warn:            var(--qg-amber-300);
  --qg-warn-bg:         rgb(170 118 14 / 22%);
  --qg-bad:             var(--qg-rose-300);
  --qg-bad-bg:          rgb(185 45 56 / 22%);

  --qg-chart-1: #8396F6;
  --qg-chart-2: #F2BF5A;
  --qg-chart-3: #65D1E6;
  --qg-chart-4: #B39EDC;
  --qg-chart-5: #80CBA3;
  --qg-chart-6: #DC6F78;
  --qg-chart-7: #4DC9FF;
  --qg-chart-8: #B2B9C7;
  --qg-chart-muted:     var(--qg-neutral-600);
  --qg-chart-grid:      var(--qg-neutral-800);
  --qg-chart-axis:      var(--qg-neutral-700);
  --qg-chart-reference: var(--qg-neutral-500);

  --qg-shadow-card:    0 1px 2px rgb(0 0 0 / 40%);
  --qg-shadow-popover: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 6px rgb(0 0 0 / 30%);
  --qg-shadow-modal:   0 24px 60px rgb(0 0 0 / 60%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
/* ============================================================
   9. Церемониальный режим — имиджевые и событийные материалы
   Снято с баннера «QazaqGaz Көшбасшылар Пулы»:
   фон #081830, золото #E0B888, орнамент и промышленное фото.
   ============================================================ */

:root {
  /* Глубокий синий — фон имиджевых носителей */
  --qg-navy-950: #050E1C;
  --qg-navy-900: #081830;   /* основной фон баннера */
  --qg-navy-800: #0A2038;   /* панели и карточки на тёмном */
  --qg-navy-700: #0E2D53;
  --qg-navy-600: #143A66;
  --qg-navy-500: #1E4C85;

  /* Золото — акцент только на тёмном */
  --qg-gold-300: #F3D4AC;
  --qg-gold-400: #F0C898;   /* блик, верх градиента */
  --qg-gold-500: #E0B888;   /* ядро: заголовки, линии, рамки */
  --qg-gold-600: #B8864F;
  --qg-gold-700: #8F6734;   /* единственная ступень для светлых носителей */
  --qg-cream:    #F5F1E8;   /* орнамент и текст на тёмном */

  --qg-gradient-gold: linear-gradient(135deg, #F3D4AC 0%, #E0B888 45%, #B8864F 100%);
  --qg-gradient-scrim: linear-gradient(90deg, #081830 38%, rgb(8 24 48 / 72%) 68%, rgb(8 24 48 / 0%) 100%);
}

/* Включается атрибутом на корне носителя: <section data-mode="ceremonial"> */
[data-mode="ceremonial"] {
  --qg-bg:             var(--qg-navy-900);
  --qg-surface:        var(--qg-navy-800);
  --qg-surface-sunken: var(--qg-navy-950);

  --qg-text:           #FFFFFF;
  --qg-text-secondary: var(--qg-cream);
  --qg-text-muted:     rgb(245 241 232 / 72%);
  --qg-text-accent:    var(--qg-gold-500);

  --qg-border:         rgb(224 184 136 / 28%);
  --qg-border-strong:  var(--qg-gold-500);

  --qg-accent:         var(--qg-gold-500);
  --qg-accent-hover:   var(--qg-gold-400);
  --qg-accent-quiet:   rgb(224 184 136 / 14%);

  /* Орнамент и тонкие линии */
  --qg-ornament:       rgb(224 184 136 / 18%);
  --qg-rule:           rgb(224 184 136 / 60%);

  /* Данные на тёмном: золото ведёт, остальное приглушено */
  --qg-chart-1:        var(--qg-gold-500);
  --qg-chart-2:        #8396F6;
  --qg-chart-muted:    rgb(245 241 232 / 38%);
  --qg-chart-grid:     rgb(245 241 232 / 12%);
  --qg-chart-axis:     rgb(245 241 232 / 24%);
  --qg-chart-reference: rgb(224 184 136 / 45%);

  color: var(--qg-text);
  background: var(--qg-bg);
}