/* colors.css — тёмная тема с голубым акцентом */

:root {
  color-scheme: dark;

  /* Фон */
  --color-bg: #0b0f17;
  --color-bg-secondary: #111827;
  --color-surface: #151e2e;
  --color-surface-hover: #1b273a;
  --color-surface-active: #223149;

  /* Границы */
  --color-border: #263449;
  --color-border-subtle: #1c2738;
  --color-divider: rgba(148, 163, 184, 0.14);

  /* Текст */
  --color-text: #f1f5f9;
  --color-text-secondary: #a8b3c5;
  --color-text-muted: #6f7d92;
  --color-text-disabled: #4b5668;
  --color-text-inverse: #07111f;

  /* Голубой акцент */
  --color-primary: #38bdf8;
  --color-primary-hover: #67cdfa;
  --color-primary-active: #0ea5e9;
  --color-primary-muted: rgba(56, 189, 248, 0.14);
  --color-primary-border: rgba(56, 189, 248, 0.42);
  --color-primary-contrast: #04131d;

  /* Состояния */
  --color-success: #34d399;
  --color-success-muted: rgba(52, 211, 153, 0.14);

  --color-warning: #fbbf24;
  --color-warning-muted: rgba(251, 191, 36, 0.14);

  --color-danger: #fb7185;
  --color-danger-muted: rgba(251, 113, 133, 0.14);

  --color-info: #60a5fa;
  --color-info-muted: rgba(96, 165, 250, 0.14);

  /* Интерактивные элементы */
  --color-link: #7dd3fc;
  --color-link-hover: #bae6fd;
  --color-focus: rgba(56, 189, 248, 0.4);
  --color-selection: rgba(56, 189, 248, 0.28);

  /* Поля ввода */
  --color-input-bg: #101827;
  --color-input-border: #2a3a51;
  --color-input-border-hover: #3c516e;
  --color-input-placeholder: #64748b;

  /* Тени */
  --shadow-color: rgba(0, 0, 0, 0.38);
  --shadow-sm: 0 2px 8px var(--shadow-color);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.32);
  --shadow-primary: 0 8px 24px rgba(14, 165, 233, 0.2);

  /* Градиенты */
  --gradient-primary: linear-gradient(135deg, #38bdf8, #2563eb);
  --gradient-surface: linear-gradient(145deg, #172235, #101827);
}

/* Базовое применение */

html,
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

body {
  accent-color: var(--color-primary);
}

::selection {
  background: var(--color-selection);
  color: var(--color-text);
}

a {
  color: var(--color-link);
  cursor: pointer;
}

a:hover {
  color: var(--color-link-hover);
}

button,
input,
textarea,
select {
  color: var(--color-text);
}

input,
textarea,
select {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-input-placeholder);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}