@charset "UTF-8";

/* Color scheme: slate — холодные серо-синие тона, акцент индиго. */

:root,
html[data-theme="light"],
html[data-theme="auto"] {
  --color-bg-page: #eef1f5;
  --color-surface: #ffffff;
  --color-surface-secondary: #e2e8f0;
  --color-brand-primary: #4f46e5;
  --color-brand-hover: #4338ca;
  --color-text-primary: #1e293b;
  --color-text-muted: #64748b;
  --color-border: #cbd5e1;
  color-scheme: light;
}

html[data-theme="dark"] {
  --color-bg-page: #0f1419;
  --color-surface: #1a2332;
  --color-surface-secondary: #243044;
  --color-brand-primary: #818cf8;
  --color-brand-hover: #a5b4fc;
  --color-text-primary: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-border: #334155;
  color-scheme: dark;
}

:root {
  --bg-page: var(--color-bg-page);
  --bg-module: var(--color-surface);
  --bg-header: var(--color-surface-secondary);
  --text-main: var(--color-text-primary);
  --text-header: #ffffff;
  --color-accent: var(--color-brand-primary);
  --color-accent-hover: var(--color-brand-hover);
  --color-link: var(--color-brand-primary);
}

:root {
  --lucus-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  --lucus-admin-table-col-divider: color-mix(in srgb, var(--color-border) 45%, transparent);
}

html[data-theme="dark"] {
  --lucus-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
  --lucus-admin-table-col-divider: color-mix(in srgb, var(--color-border) 55%, transparent);
}

:root {
  --lucus-accent: var(--color-brand-primary);
  --lucus-accent-hover: var(--color-brand-hover);
}

html[data-theme="light"],
html[data-theme="auto"],
html[data-theme="dark"] {
  --button-bg: var(--lucus-accent);
  --button-hover-bg: var(--lucus-accent-hover);
  --default-button-bg: var(--lucus-accent);
  --default-button-hover-bg: var(--lucus-accent-hover);
  --link-fg: var(--lucus-accent);
  --link-hover-color: var(--lucus-accent-hover);
  --link-selected-fg: var(--lucus-accent);
  --body-bg: var(--color-bg-page) !important;
  --body-fg: var(--color-text-primary) !important;
  --hairline-color: var(--color-border);
  --border-color: var(--color-border);
  --darkened-bg: var(--color-bg-page);
}
