/* ════════════════════════════════════════════════════════════════════
   Asadram — дизайн-токены v41

   Направление сменилось: меньше декора, больше воздуха.
   Убраны градиенты и тяжёлые тени, линии стали вдвое тоньше,
   отступы крупнее. Цвет один — королевский синий на белом — и он
   теперь работает точечно, а не заливает половину экрана.

   Правило прежнее и жёсткое: ни одного цвета вне этого файла.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Королевский синий ────────────────────────────────────────── */
  --royal-50:  #EEF2FE;
  --royal-100: #DCE4FD;
  --royal-200: #B9C9FB;
  --royal-300: #8FA7F7;
  --royal-400: #6383F2;
  --royal-500: #3A63F0;   /* основной */
  --royal-600: #2749D8;
  --royal-700: #1E39AE;
  --royal-800: #182C85;
  --royal-900: #111E5C;

  /* Вспомогательные — только для смысла, не для украшения */
  --ember-400: #FFA566;
  --ember-500: #FF8A3D;   /* огоньки */
  --ember-600: #F2691A;
  --mint-500:  #16B981;   /* в сети, успех */
  --mint-600:  #0E9268;
  --rose-500:  #F0424E;   /* опасность */
  --rose-600:  #D42836;
  --gold-500:  #F0A81E;   /* Grams, премиум */

  /* Редкость подарков */
  --rarity-common:    #8E93A8;
  --rarity-rare:      #3A8DF0;
  --rarity-epic:      #9B4DF0;
  --rarity-legendary: #F0A81E;
  --rarity-mythic:    #F0424E;

  /* ── Типографика ──────────────────────────────────────────────── */
  --font-ui: "Onest", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
             "Noto Sans", Arial, sans-serif, "Apple Color Emoji",
             "Noto Color Emoji", "Segoe UI Emoji";
  --font-display: var(--font-ui);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Эмодзи.
     Шрифт Apple лицензионный и встроить его в сайт нельзя — но на
     iPhone и Mac он уже стоит в системе, поэтому просим его первым.
     Остальным достаётся открытый Noto, он ближе к «айфоновскому»
     виду, чем плоские системные наборы Windows. */
  --font-emoji: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji",
                "Segoe UI Symbol", "Twemoji Mozilla", sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.5rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-loose: 1.7;

  /* Ровно три начертания. Тяжелее 600 не бывает — утяжеляет экран. */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  /* ── Скругления: спокойнее прежних ────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;
  --r-bubble: 18px;
  --r-bubble-tail: 5px;

  /* ── Воздух ───────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 28px;
  --sp-8: 40px;
  --sp-10: 56px;
  --sp-12: 72px;

  /* ── Движение ─────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.45, .05, .55, .95);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 300ms;

  /* ── Оболочка ─────────────────────────────────────────────────── */
  --nav-height: 60px;
  --head-height: 60px;
  --sidebar-width: 372px;
  --composer-min: 52px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-panel: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-call: 600;
}

/* ════════════════════════════════════════════════════════════════════
   Светлая тема — белая, почти без серого
   ════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:          #FFFFFF;
  --bg-sunken:   #FAFBFD;
  --bg-raised:   #FFFFFF;
  --bg-overlay:  rgba(17, 30, 92, .32);
  --bg-hover:    rgba(58, 99, 240, .05);
  --bg-active:   rgba(58, 99, 240, .09);
  --bg-input:    #F5F7FB;

  --fg:          #10142A;
  --fg-soft:     #494F66;
  --fg-muted:    #7C8299;
  --fg-faint:    #A8AEC2;
  --fg-invert:   #FFFFFF;

  /* Линии тонкие: заметны, но не рисуют сетку поверх содержимого */
  --line:        rgba(16, 20, 42, .08);
  --line-strong: rgba(16, 20, 42, .14);

  --accent:      var(--royal-500);
  --accent-hover: var(--royal-600);
  --accent-soft: var(--royal-50);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(58, 99, 240, .22);

  --bubble-in:      #F3F5F9;
  --bubble-in-text: #10142A;
  --bubble-out:     var(--royal-500);
  --bubble-out-text: #FFFFFF;
  --bubble-out-meta: rgba(255, 255, 255, .7);

  --chat-bg:     #FFFFFF;
  --pattern-ink: rgba(58, 99, 240, .055);

  /* Теней почти нет — только там, где элемент действительно парит */
  --shadow-sm:  0 1px 2px rgba(16, 20, 42, .04);
  --shadow-md:  0 2px 8px rgba(16, 20, 42, .06);
  --shadow-lg:  0 8px 28px rgba(16, 20, 42, .09);
  --shadow-pop: 0 14px 44px rgba(16, 20, 42, .14);
}

/* ════════════════════════════════════════════════════════════════════
   Тёмная тема
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0A0C16;
  --bg-sunken:   #0E1120;
  --bg-raised:   #141829;
  --bg-overlay:  rgba(3, 4, 10, .66);
  --bg-hover:    rgba(143, 167, 247, .07);
  --bg-active:   rgba(143, 167, 247, .12);
  --bg-input:    #171B2E;

  --fg:          #EDEFF7;
  --fg-soft:     #B0B6CC;
  --fg-muted:    #7B8199;
  --fg-faint:    #565D75;
  --fg-invert:   #0A0C16;

  --line:        rgba(237, 239, 247, .08);
  --line-strong: rgba(237, 239, 247, .15);

  --accent:      var(--royal-400);
  --accent-hover: var(--royal-300);
  --accent-soft: rgba(99, 131, 242, .14);
  --accent-text: #FFFFFF;
  --accent-ring: rgba(99, 131, 242, .28);

  --bubble-in:      #1A1F33;
  --bubble-in-text: #EDEFF7;
  --bubble-out:     var(--royal-600);
  --bubble-out-text: #FFFFFF;
  --bubble-out-meta: rgba(255, 255, 255, .64);

  --chat-bg:     #0A0C16;
  --pattern-ink: rgba(143, 167, 247, .06);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 2px 10px rgba(0, 0, 0, .42);
  --shadow-lg:  0 10px 32px rgba(0, 0, 0, .5);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, .6);
}

/* ════════════════════════════════════════════════════════════════════
   Акценты — королевский синий по умолчанию
   ════════════════════════════════════════════════════════════════════ */
[data-accent="ember"] {
  --accent: var(--ember-500);
  --accent-hover: var(--ember-600);
  --accent-ring: rgba(255, 138, 61, .25);
  --accent-soft: rgba(255, 138, 61, .1);
  --bubble-out: var(--ember-600);
}
[data-accent="mint"] {
  --accent: var(--mint-500);
  --accent-hover: var(--mint-600);
  --accent-ring: rgba(22, 185, 129, .25);
  --accent-soft: rgba(22, 185, 129, .1);
  --bubble-out: var(--mint-600);
}
[data-accent="rose"] {
  --accent: var(--rose-500);
  --accent-hover: var(--rose-600);
  --accent-ring: rgba(240, 66, 78, .25);
  --accent-soft: rgba(240, 66, 78, .1);
  --bubble-out: var(--rose-600);
}
[data-accent="gold"] {
  --accent: #D89412;
  --accent-hover: #B87D0A;
  --accent-ring: rgba(240, 168, 30, .26);
  --accent-soft: rgba(240, 168, 30, .12);
  --bubble-out: #C9880E;
}
[data-accent="ink"] {
  --accent: #232842;
  --accent-hover: #10142A;
  --accent-ring: rgba(35, 40, 66, .22);
  --accent-soft: rgba(35, 40, 66, .07);
  --bubble-out: #232842;
}
[data-theme="dark"][data-accent="ink"] {
  --accent: #C3C9E0;
  --accent-hover: #E1E5F2;
  --bubble-out: #2B3150;
}

/* ════════════════════════════════════════════════════════════════════
   Системные настройки
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(16, 20, 42, .22);
    --fg-muted: #494F66;
  }
}