/* tokens.css - дизайн-токены DevBase. Только переменные, ничего не рисует. */

:root {
  /* Базовая светлая тема */
  --theme-primary: #2563eb;
  --theme-primary-hover: #1d4ed8;
  --theme-primary-rgb: 37, 99, 235;
  --theme-body-bg: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  --theme-nav-bg: #ffffff;
  --theme-footer-bg: #f8f9fa;
  --theme-footer-border: #dee2e6;
  --theme-button-bg: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-hover));
  --theme-button-bg-hover: linear-gradient(135deg, var(--theme-primary-hover), var(--theme-primary));
  --theme-button-shadow: 0 4px 14px rgba(var(--theme-primary-rgb), 0.18);
  --theme-card-gradient: linear-gradient(120deg, #f1f5f9 0%, #e0e7ef 100%);

  /* Поверхности */
  --ui-surface-1: #ffffff;
  --ui-surface-2: #f8fafc;
  --ui-surface-3: #f1f5f9;
  --ui-surface-inset: #f8fafc;
  --ui-surface-overlay: rgba(255, 255, 255, 0.94);
  --ui-bg-solid: #ffffff;
  --ui-scrim: rgba(2, 6, 23, 0.5);

  /* Линии */
  --ui-border: #e2e8f0;
  --ui-border-strong: #cbd5e1;
  --ui-border-subtle: rgba(15, 23, 42, .06);

  /* Текст */
  --ui-text-1: #0f172a;
  --ui-text-2: #475569;
  --ui-text-3: #94a3b8;
  --ui-text-on-accent: #ffffff;

  /* Статусы */
  --ui-success: #059669;
  --ui-success-soft: rgba(16, 185, 129, .12);
  --ui-warning: #b45309;
  --ui-warning-soft: rgba(245, 158, 11, .14);
  --ui-danger: #e11d48;
  --ui-danger-rgb: 225, 29, 72;
  --ui-danger-soft: rgba(244, 63, 94, .12);
  --ui-info: #0284c7;
  --ui-info-soft: rgba(56, 189, 248, .14);

  /* Радиусы */
  --ui-radius-xs: 6px;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-radius-xl: 24px;
  --ui-radius-pill: 999px;

  /* Тени: деликатные, многослойные */
  --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .05);
  --ui-shadow-md: 0 2px 4px rgba(15, 23, 42, .04), 0 10px 26px rgba(15, 23, 42, .07);
  --ui-shadow-lg: 0 4px 10px rgba(15, 23, 42, .05), 0 20px 48px rgba(15, 23, 42, .10);
  --ui-shadow-accent: 0 10px 30px rgba(var(--ui-accent-rgb), .18);

  /* Типографика */
  --ui-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --ui-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;

  /* Движение */
  --ui-ease: cubic-bezier(.4, 0, .2, 1);
  --ui-dur-fast: 140ms;
  --ui-dur: 200ms;
  --ui-dur-slow: 320ms;

  /* Раскладка */
  --ui-header-h: 68px;

  /* Слои. Единственная шкала на весь сайт (кроме админки): выше модалок — только тосты.
     Любой новый фиксированный элемент берёт значение отсюда, а не придумывает своё. */
  --ui-z-float: 1010;            /* плавающие кнопки: наверх, чат-виджет */
  --ui-z-nav: 1030;              /* залипающая шапка */
  --ui-z-widget: 1055;           /* всплывающее окно чат-виджета — поверх шапки */
  --ui-z-drawer-backdrop: 1100;  /* затемнение под мобильным меню */
  --ui-z-drawer-nav: 1105;       /* шапка с крестиком поверх этого затемнения */
  --ui-z-drawer: 1110;           /* сама выдвижная панель меню */
  --ui-z-modal-backdrop: 1200;   /* затемнение модалок */
  --ui-z-modal: 1210;            /* окно модалки */
  --ui-z-toast: 1250;            /* тосты и уведомления поверх всего */

  /* Плавающие элементы правого нижнего угла. Кнопка «наверх» стоит в самом углу,
     чат-виджет — над ней, поэтому его отступ снизу больше на высоту кнопки и зазор.
     Один источник чисел: иначе виджет чата снова наползёт на кнопку промотки. */
  --ui-float-x: 28px;
  --ui-float-y: 32px;
  --ui-float-size: 48px;
  --ui-float-gap: 16px;
  /* Чат стоит левее кнопки «наверх»: его кнопка крупнее и у самого края мешала
     промотке и краевым жестам браузера. */
  --ui-chat-x: calc(var(--ui-float-x) + 22px);
  --ui-chat-y: calc(var(--ui-float-y) + var(--ui-float-size) + var(--ui-float-gap));
}

/* Узкие экраны: и кнопка, и чат прижимаются ближе к краю, но порядок слоёв
   и зазор между ними сохраняются. */
@media (max-width: 700px) {
  :root {
    --ui-float-x: 16px;
    --ui-float-y: 18px;
    --ui-float-size: 40px;
    --ui-float-gap: 12px;
    --ui-chat-x: calc(var(--ui-float-x) + 8px);
  }
}

/* Акцент выводится из темы, поэтому подбор своего цвета в профиле продолжает работать. */
:root,
body {
  --ui-accent: var(--theme-primary);
  --ui-accent-hover: var(--theme-primary-hover);
  --ui-accent-rgb: var(--theme-primary-rgb);
  --ui-accent-soft: rgba(var(--ui-accent-rgb), .10);
  --ui-accent-softer: rgba(var(--ui-accent-rgb), .05);
  --ui-accent-ring: rgba(var(--ui-accent-rgb), .28);
  --ui-shadow-accent: 0 10px 30px rgba(var(--ui-accent-rgb), .18);
}

/* Светлые темы: вспомогательные поверхности слегка подкрашены акцентом, чтобы карточки не выглядели серыми. */
:root,
body:not([data-theme="dark"]) {
  color-scheme: light;
  --ui-surface-2: #f8fafc;
  --ui-surface-2: color-mix(in srgb, var(--ui-accent) 4%, #ffffff);
  --ui-surface-3: #f1f5f9;
  --ui-surface-3: color-mix(in srgb, var(--ui-accent) 6%, #ffffff);
  --ui-surface-inset: #f8fafc;
  --ui-surface-inset: color-mix(in srgb, var(--ui-accent) 3%, #ffffff);
}

/* Тёмная тема: многослойные zinc-поверхности, глубина от границ, а не от теней. */
body[data-theme="dark"] {
  /* Нативные контролы (радио, чекбоксы, input[type=time|color|date]) должны быть тёмными */
  color-scheme: dark;

  --theme-primary: #3b82f6;
  --theme-primary-hover: #2563eb;
  --theme-primary-rgb: 59, 130, 246;
  --theme-body-bg: #0a0a0a;
  --theme-nav-bg: rgba(10, 10, 10, 0.6);
  --theme-footer-bg: rgba(15, 23, 42, 0.6);
  --theme-footer-border: rgba(148, 163, 184, 0.25);
  --theme-button-bg: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  --theme-card-gradient: linear-gradient(120deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);

  --ui-surface-1: #18181b;
  --ui-surface-2: #1f1f23;
  --ui-surface-3: #27272a;
  --ui-surface-inset: #0c0c0f;
  --ui-surface-overlay: rgba(24, 24, 27, 0.96);
  --ui-bg-solid: #0a0a0a;
  --ui-scrim: rgba(0, 0, 0, 0.65);

  --ui-border: #27272a;
  --ui-border-strong: #3f3f46;
  --ui-border-subtle: rgba(255, 255, 255, .06);

  --ui-text-1: #f4f4f5;
  --ui-text-2: #a1a1aa;
  --ui-text-3: #71717a;
  --ui-text-on-accent: #ffffff;

  --ui-success: #34d399;
  --ui-success-soft: rgba(16, 185, 129, .14);
  --ui-warning: #fbbf24;
  --ui-warning-soft: rgba(245, 158, 11, .14);
  --ui-danger: #fb7185;
  --ui-danger-rgb: 251, 113, 133;
  --ui-danger-soft: rgba(244, 63, 94, .14);
  --ui-info: #38bdf8;
  --ui-info-soft: rgba(56, 189, 248, .14);

  /* В тёмной теме тени почти не видны */
  --ui-shadow-xs: 0 1px 1px rgba(0, 0, 0, .45);
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --ui-shadow-md: 0 2px 6px rgba(0, 0, 0, .55);
  --ui-shadow-lg: 0 6px 18px rgba(0, 0, 0, .6);
  --ui-shadow-accent: 0 6px 18px rgba(var(--ui-accent-rgb), .22);
}

body[data-theme="newyear"] {
  --theme-primary: #2f8f9d;
  --theme-primary-hover: #237a86;
  --theme-primary-rgb: 47, 143, 157;
  --theme-body-bg: linear-gradient(180deg, #f0fbff 0%, #e6f3ff 45%, #fef9f2 100%);
  --theme-nav-bg: rgba(255, 255, 255, 0.95);
  --theme-footer-bg: rgba(255, 255, 255, 0.92);
  --theme-footer-border: rgba(191, 219, 254, 0.7);
  --theme-button-bg: linear-gradient(135deg, #1e8aa5 0%, #34d399 60%, #93c5fd 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #16788f 0%, #2fb78a 60%, #76b3f6 100%);
  --theme-card-gradient: linear-gradient(120deg, #f5fbff 0%, #e8f0ff 100%);
}

body[data-theme="sakura"] {
  --theme-primary: #e2558b;
  --theme-primary-hover: #c73f74;
  --theme-primary-rgb: 226, 85, 139;
  --theme-body-bg: linear-gradient(180deg, #fff1f5 0%, #ffe4ec 45%, #fef6ff 100%);
  --theme-nav-bg: rgba(255, 255, 255, 0.95);
  --theme-footer-bg: rgba(255, 245, 250, 0.95);
  --theme-footer-border: rgba(251, 207, 232, 0.7);
  --theme-button-bg: linear-gradient(135deg, #e2558b 0%, #f472b6 55%, #f9a8d4 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #c73f74 0%, #e758a1 55%, #f48cc8 100%);
  --theme-card-gradient: linear-gradient(120deg, #fff7fb 0%, #ffe5ef 100%);
}

body[data-theme="ocean"] {
  --theme-primary: #1b8dbf;
  --theme-primary-hover: #15759e;
  --theme-primary-rgb: 27, 141, 191;
  --theme-body-bg: linear-gradient(180deg, #eef8ff 0%, #e0f2ff 50%, #dff7f5 100%);
  --theme-nav-bg: rgba(255, 255, 255, 0.95);
  --theme-footer-bg: rgba(239, 248, 255, 0.95);
  --theme-footer-border: rgba(186, 230, 253, 0.7);
  --theme-button-bg: linear-gradient(135deg, #1b8dbf 0%, #22d3ee 60%, #38bdf8 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #15759e 0%, #1fb2cc 60%, #2ea5dd 100%);
  --theme-card-gradient: linear-gradient(120deg, #f0fbff 0%, #e0f4ff 100%);
}

body[data-theme="forest"] {
  --theme-primary: #2f855a;
  --theme-primary-hover: #276749;
  --theme-primary-rgb: 47, 133, 90;
  --theme-body-bg: linear-gradient(180deg, #f0fff4 0%, #e6f7ec 50%, #f9fdf6 100%);
  --theme-nav-bg: rgba(255, 255, 255, 0.94);
  --theme-footer-bg: rgba(245, 255, 250, 0.95);
  --theme-footer-border: rgba(187, 247, 208, 0.7);
  --theme-button-bg: linear-gradient(135deg, #2f855a 0%, #48bb78 55%, #86efac 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #276749 0%, #3da06b 55%, #6ee7a0 100%);
  --theme-card-gradient: linear-gradient(120deg, #f3fff8 0%, #e4f6ea 100%);
}

body[data-theme="sunset"] {
  --theme-primary: #f97316;
  --theme-primary-hover: #ea580c;
  --theme-primary-rgb: 249, 115, 22;
  --theme-body-bg: linear-gradient(180deg, #fff7ed 0%, #ffedd5 45%, #fde68a 100%);
  --theme-nav-bg: rgba(255, 255, 255, 0.95);
  --theme-footer-bg: rgba(255, 248, 235, 0.96);
  --theme-footer-border: rgba(254, 215, 170, 0.8);
  --theme-button-bg: linear-gradient(135deg, #f97316 0%, #fb7185 55%, #fbbf24 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #ea580c 0%, #f43f5e 55%, #f59e0b 100%);
  --theme-card-gradient: linear-gradient(120deg, #fff7ed 0%, #ffe7d1 100%);
}

body[data-theme="aurora"] {
  --theme-primary: #16a34a;
  --theme-primary-hover: #15803d;
  --theme-primary-rgb: 22, 163, 74;
  --theme-body-bg: linear-gradient(180deg, #ecfeff 0%, #e0f2fe 40%, #f0fdf4 100%);
  --theme-nav-bg: rgba(240, 253, 250, 0.95);
  --theme-footer-bg: rgba(236, 254, 255, 0.95);
  --theme-footer-border: rgba(187, 247, 208, 0.7);
  --theme-button-bg: linear-gradient(135deg, #16a34a 0%, #22d3ee 55%, #86efac 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #15803d 0%, #0ea5e9 55%, #6ee7a0 100%);
  --theme-card-gradient: linear-gradient(120deg, #f0fdfa 0%, #e0f2fe 100%);
}

body[data-theme="desert"] {
  --theme-primary: #d97706;
  --theme-primary-hover: #b45309;
  --theme-primary-rgb: 217, 119, 6;
  --theme-body-bg: linear-gradient(180deg, #fff7ed 0%, #ffedd5 55%, #fef3c7 100%);
  --theme-nav-bg: rgba(255, 248, 235, 0.96);
  --theme-footer-bg: rgba(255, 247, 237, 0.95);
  --theme-footer-border: rgba(251, 191, 36, 0.6);
  --theme-button-bg: linear-gradient(135deg, #d97706 0%, #f59e0b 55%, #fbbf24 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #b45309 0%, #d97706 55%, #f59e0b 100%);
  --theme-card-gradient: linear-gradient(120deg, #fff7ed 0%, #ffedd5 100%);
}

body[data-theme="lavender"] {
  --theme-primary: #8b5cf6;
  --theme-primary-hover: #7c3aed;
  --theme-primary-rgb: 139, 92, 246;
  --theme-body-bg: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 45%, #fdf2f8 100%);
  --theme-nav-bg: rgba(250, 245, 255, 0.96);
  --theme-footer-bg: rgba(250, 245, 255, 0.95);
  --theme-footer-border: rgba(216, 180, 254, 0.7);
  --theme-button-bg: linear-gradient(135deg, #8b5cf6 0%, #c084fc 55%, #f0abfc 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #7c3aed 0%, #a855f7 55%, #e879f9 100%);
  --theme-card-gradient: linear-gradient(120deg, #faf5ff 0%, #f3e8ff 100%);
}

body[data-theme="graphite"] {
  --theme-primary: #475569;
  --theme-primary-hover: #334155;
  --theme-primary-rgb: 71, 85, 105;
  --theme-body-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 55%, #f1f5f9 100%);
  --theme-nav-bg: rgba(248, 250, 252, 0.95);
  --theme-footer-bg: rgba(241, 245, 249, 0.96);
  --theme-footer-border: rgba(148, 163, 184, 0.6);
  --theme-button-bg: linear-gradient(135deg, #475569 0%, #64748b 55%, #94a3b8 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #334155 0%, #475569 55%, #64748b 100%);
  --theme-card-gradient: linear-gradient(120deg, #f8fafc 0%, #e2e8f0 100%);
}

body[data-theme="citrus"] {
  --theme-primary: #84cc16;
  --theme-primary-hover: #65a30d;
  --theme-primary-rgb: 132, 204, 22;
  --theme-body-bg: linear-gradient(180deg, #f7fee7 0%, #ecfccb 50%, #fef9c3 100%);
  --theme-nav-bg: rgba(247, 254, 231, 0.96);
  --theme-footer-bg: rgba(254, 252, 232, 0.96);
  --theme-footer-border: rgba(190, 242, 100, 0.7);
  --theme-button-bg: linear-gradient(135deg, #84cc16 0%, #22c55e 55%, #fde047 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #65a30d 0%, #16a34a 55%, #facc15 100%);
  --theme-card-gradient: linear-gradient(120deg, #f7fee7 0%, #ecfccb 100%);
}

body[data-theme="ruby"] {
  --theme-primary: #e11d48;
  --theme-primary-hover: #be123c;
  --theme-primary-rgb: 225, 29, 72;
  --theme-body-bg: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 45%, #fff7ed 100%);
  --theme-nav-bg: rgba(255, 241, 242, 0.96);
  --theme-footer-bg: rgba(255, 228, 230, 0.95);
  --theme-footer-border: rgba(251, 113, 133, 0.7);
  --theme-button-bg: linear-gradient(135deg, #e11d48 0%, #f43f5e 55%, #fb7185 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #be123c 0%, #e11d48 55%, #f43f5e 100%);
  --theme-card-gradient: linear-gradient(120deg, #fff1f2 0%, #ffe4e6 100%);
}

body[data-theme="mint"] {
  --theme-primary: #0f766e;
  --theme-primary-hover: #0f5f58;
  --theme-primary-rgb: 15, 118, 110;
  --theme-body-bg: linear-gradient(180deg, #ecfeff 0%, #cffafe 50%, #f0fdfa 100%);
  --theme-nav-bg: rgba(236, 254, 255, 0.96);
  --theme-footer-bg: rgba(240, 253, 250, 0.95);
  --theme-footer-border: rgba(94, 234, 212, 0.6);
  --theme-button-bg: linear-gradient(135deg, #0f766e 0%, #14b8a6 55%, #5eead4 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #0f5f58 0%, #0f766e 55%, #2dd4bf 100%);
  --theme-card-gradient: linear-gradient(120deg, #ecfeff 0%, #cffafe 100%);
}

body[data-theme="slate"] {
  --theme-primary: #0ea5e9;
  --theme-primary-hover: #0284c7;
  --theme-primary-rgb: 14, 165, 233;
  --theme-body-bg: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 50%, #e0f2fe 100%);
  --theme-nav-bg: rgba(241, 245, 249, 0.96);
  --theme-footer-bg: rgba(224, 242, 254, 0.96);
  --theme-footer-border: rgba(125, 211, 252, 0.7);
  --theme-button-bg: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 55%, #7dd3fc 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #0284c7 0%, #0ea5e9 55%, #38bdf8 100%);
  --theme-card-gradient: linear-gradient(120deg, #f1f5f9 0%, #e0f2fe 100%);
}

body[data-theme="peach"] {
  --theme-primary: #fb7185;
  --theme-primary-hover: #f43f5e;
  --theme-primary-rgb: 251, 113, 133;
  --theme-body-bg: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 40%, #ffedd5 100%);
  --theme-nav-bg: rgba(255, 241, 242, 0.96);
  --theme-footer-bg: rgba(255, 237, 213, 0.96);
  --theme-footer-border: rgba(253, 164, 175, 0.7);
  --theme-button-bg: linear-gradient(135deg, #fb7185 0%, #fdba74 55%, #fda4af 100%);
  --theme-button-bg-hover: linear-gradient(135deg, #f43f5e 0%, #fb7185 55%, #fdba74 100%);
  --theme-card-gradient: linear-gradient(120deg, #fff1f2 0%, #ffe4e6 100%);
}