/* Общие токены темы ColorAI: лендинг, чат, кнопки CTA, страницы аккаунта */

/* ─── Лендинг (семантическая палитра) ─── */
:root {
  --color-surface-dim: 247 246 242;
  --color-surface-variant: 242 240 235;
  --color-surface-container-highest: 235 232 226;
  --color-on-secondary-fixed: 10 10 10;
  --color-secondary-fixed-dim: 139 115 85;
  --color-on-primary-fixed: 10 10 10;
  --color-on-primary-container: 26 26 26;
  --color-secondary-container: 220 205 185;
  --color-on-surface: 10 10 10;
  --color-background: 247 246 242;
  --color-on-tertiary-container: 10 10 10;
  --color-on-secondary-container: 26 26 26;
  --color-inverse-on-surface: 245 245 245;
  --color-on-primary: 10 10 10;
  --color-on-error-container: 90 20 20;
  --color-surface: 255 255 255;
  --color-secondary-fixed: 216 189 120;
  --color-on-tertiary-fixed: 10 10 10;
  --color-tertiary-fixed-dim: 163 140 90;
  --color-surface-container-high: 232 229 222;
  --color-primary: 201 169 98;
  --color-on-secondary-fixed-variant: 55 53 50;
  --color-inverse-primary: 139 115 85;
  --color-inverse-surface: 10 10 10;
  --color-surface-bright: 255 255 255;
  --color-surface-container-lowest: 239 236 230;
  --color-primary-fixed: 216 189 120;
  --color-primary-fixed-dim: 201 169 98;
  --color-on-primary-fixed-variant: 40 38 36;
  --color-tertiary-fixed: 228 214 180;
  --color-surface-tint: 201 169 98;
  --color-outline-variant: 229 226 218;
  --color-on-background: 10 10 10;
  --color-secondary: 139 115 85;
  --color-surface-container: 237 234 228;
  --color-on-secondary: 255 255 255;
  --color-on-tertiary: 10 10 10;
  --color-primary-container: 236 225 200;
  --color-tertiary-container: 220 208 190;
  --color-surface-container-low: 244 242 237;
  --color-tertiary: 184 152 79;
  --color-outline: 140 135 128;
  --color-error: 185 70 70;
  --color-on-error: 255 255 255;
  --color-error-container: 254 226 226;
  --color-on-tertiary-fixed-variant: 55 53 50;
  --color-on-surface-variant: 92 90 86;
  --theme-scrollbar-thumb: 212 208 200;
  --theme-glass-bg: rgba(255, 255, 255, 0.9);
  --theme-glass-border: rgba(201, 169, 98, 0.22);

  /* Как в макете светлой темы: сплошная заливка кнопок */
  --cta-fill: 10 10 10;
  --cta-on: 255 255 255;

  /* Чат */
  --ch-navy: 247 246 242;
  --ch-navy-mid: 252 251 248;
  --ch-navy-light: 236 233 226;
  --ch-navy-border: 210 206 198;
  --ch-navy-hover: 222 218 210;
  --ch-text-main: 16 16 15;
  --ch-text-muted: 88 84 78;
  --ch-text-dim: 118 114 108;
  --ch-gold: 201 169 98;
  --ch-gold-light: 222 200 145;
  --ch-gold-dim: 139 115 85;
  --ch-welcome-accent: 232 230 242;
  --ch-grid-opacity: 0.06;
  --ch-table-th-bg: 238 234 226;
  --ch-table-border: 205 198 188;
  --ch-table-td: 52 50 47;
  --ch-table-row-hover: 244 241 235;
  --ch-bot-strong: 16 16 15;
  --ch-bot-heading-soft: 58 56 52;
  --ch-bot-topic: 95 91 85;
  --ch-mark-fg: 16 16 15;
  --ch-action-hover: 0 0 0 / 0.06;
  --ch-pmenu-hover-bg: 236 232 224;
  --ch-sidebar-overlay: 0 0 0 / 0.35;

  /* Профиль / вход */
  --auth-bg: 247 246 242;
  --auth-muted-bg: 236 233 226;
  --auth-card: 255 255 255;
  --auth-border: 229 226 218;
  --auth-gold: 201 169 98;
  --auth-gold-hover: 218 198 140;
  --auth-autofill-fg: 17 24 39;
  /* Текст форм: светлая тема — тёмные буквы на светлом фоне */
  --auth-ink: 17 24 39;
  --auth-ink-muted: 82 82 91;
  --auth-ink-dim: 113 113 122;
  --auth-input-fg: 17 24 39;
  --auth-input-placeholder: 120 113 108;
}

html.dark {
  --color-surface-dim: 10 10 10;
  --color-surface-variant: 22 22 22;
  --color-surface-container-highest: 26 26 26;
  --color-on-secondary-fixed: 10 10 10;
  --color-secondary-fixed-dim: 139 115 85;
  --color-on-primary-fixed: 10 10 10;
  --color-on-primary-container: 245 245 245;
  --color-secondary-container: 139 115 85;
  --color-on-surface: 245 245 245;
  --color-background: 10 10 10;
  --color-on-tertiary-container: 10 10 10;
  --color-on-secondary-container: 245 245 245;
  --color-inverse-on-surface: 17 17 17;
  --color-on-primary: 10 10 10;
  --color-on-error-container: 245 245 245;
  --color-surface: 10 10 10;
  --color-secondary-fixed: 216 189 120;
  --color-on-tertiary-fixed: 10 10 10;
  --color-tertiary-fixed-dim: 184 152 79;
  --color-surface-container-high: 26 26 26;
  --color-primary: 201 169 98;
  --color-on-secondary-fixed-variant: 17 17 17;
  --color-inverse-primary: 184 152 79;
  --color-inverse-surface: 245 245 245;
  --color-surface-bright: 36 36 36;
  --color-surface-container-lowest: 5 5 5;
  --color-primary-fixed: 216 189 120;
  --color-primary-fixed-dim: 201 169 98;
  --color-on-primary-fixed-variant: 17 17 17;
  --color-tertiary-fixed: 232 214 168;
  --color-surface-tint: 201 169 98;
  --color-outline-variant: 31 41 55;
  --color-on-background: 245 245 245;
  --color-secondary: 139 115 85;
  --color-surface-container: 17 17 17;
  --color-on-secondary: 10 10 10;
  --color-on-tertiary: 10 10 10;
  --color-primary-container: 184 152 79;
  --color-tertiary-container: 139 115 85;
  --color-surface-container-low: 17 17 17;
  --color-tertiary: 216 189 120;
  --color-outline: 107 114 128;
  --color-error: 229 165 165;
  --color-on-error: 10 10 10;
  --color-error-container: 127 29 29;
  --color-on-tertiary-fixed-variant: 17 17 17;
  --color-on-surface-variant: 163 163 163;
  --theme-scrollbar-thumb: 31 41 55;
  --theme-glass-bg: rgba(17, 17, 17, 0.88);
  --theme-glass-border: rgba(201, 169, 98, 0.16);

  --cta-fill: 201 169 98;
  --cta-on: 10 10 10;

  --ch-navy: 10 10 10;
  --ch-navy-mid: 17 17 17;
  --ch-navy-light: 22 22 22;
  --ch-navy-border: 31 41 55;
  --ch-navy-hover: 42 42 42;
  --ch-text-main: 245 245 245;
  --ch-text-muted: 163 163 163;
  --ch-text-dim: 107 114 128;
  --ch-gold: 201 169 98;
  --ch-gold-light: 216 189 120;
  --ch-gold-dim: 139 115 85;
  --ch-welcome-accent: 26 26 46;
  --ch-grid-opacity: 0.08;
  --ch-table-th-bg: 30 26 20;
  --ch-table-border: 58 48 32;
  --ch-table-td: 212 207 200;
  --ch-table-row-hover: 30 26 20;
  --ch-bot-strong: 245 245 245;
  --ch-bot-heading-soft: 234 230 223;
  --ch-bot-topic: 207 198 184;
  --ch-mark-fg: 245 245 245;
  --ch-action-hover: 255 255 255 / 0.06;
  --ch-pmenu-hover-bg: 22 22 22;
  --ch-sidebar-overlay: 0 0 0 / 0.5;

  --auth-bg: 10 10 10;
  --auth-muted-bg: 26 26 26;
  --auth-card: 17 17 17;
  --auth-border: 31 41 55;
  --auth-gold: 201 169 98;
  --auth-gold-hover: 223 200 142;
  --auth-autofill-fg: 229 231 235;
  --auth-ink: 245 245 245;
  --auth-ink-muted: 161 161 170;
  --auth-ink-dim: 113 113 122;
  --auth-input-fg: 243 244 246;
  --auth-input-placeholder: 161 161 170;
}

/* Страницы входа / регистрации / сброса пароля (класс auth-page на body) */
.auth-page .auth-ink {
  color: rgb(var(--auth-ink));
}
.auth-page .auth-muted {
  color: rgb(var(--auth-ink-muted));
}
.auth-page .auth-dim {
  color: rgb(var(--auth-ink-dim));
}
.auth-page .auth-form input[type="email"],
.auth-page .auth-form input[type="password"],
.auth-page .auth-form input[type="text"] {
  color: rgb(var(--auth-input-fg));
}
.auth-page .auth-form input::placeholder {
  color: rgb(var(--auth-input-placeholder));
  opacity: 1;
}
.auth-page .auth-input-icon {
  color: rgb(var(--auth-ink-muted));
}
.auth-page .auth-input-icon:hover {
  color: rgb(var(--auth-ink));
}
.auth-page .group:hover .auth-consent-text {
  color: rgb(var(--auth-ink));
}

/* Основные кнопки (макет: сплошная заливка, светлая тема — «чернильная», тёмная — золото) */
.machined-gradient,
.btn-cta {
  background-color: rgb(var(--cta-fill)) !important;
  background-image: none !important;
  color: rgb(var(--cta-on)) !important;
}
.machined-gradient:hover,
.btn-cta:hover {
  filter: brightness(1.07);
}

/* Выпадающее меню темы (общее для страниц) */
.cai-theme-anchor {
  position: relative;
}
.cai-theme-panel.theme-hidden {
  display: none;
}
.cai-theme-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 11rem;
  padding: 0.35rem 0;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-outline-variant) / 0.95);
  background: rgb(var(--color-surface));
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.12);
  z-index: 60;
}
html.dark .cai-theme-panel {
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
}
.theme-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.85rem;
  font-size: 0.8125rem;
  text-align: left;
  color: rgb(var(--color-on-surface-variant));
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.theme-opt:hover {
  background: rgb(var(--color-surface-container-low));
  color: rgb(var(--color-on-surface));
}
.theme-opt.theme-opt-active {
  color: rgb(var(--color-primary));
  font-weight: 600;
}
.theme-opt .material-symbols-outlined {
  font-size: 1.125rem;
  opacity: 0.85;
}