/* -------------------------------------------------------
   Base
------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Theme tokens (light) */
  --bg: 250 250 250;     /* neutral-50 */
  --fg: 23 23 23;        /* neutral-900 */
  --card: 255 255 255;   /* white */
  --border: 229 229 229; /* neutral-200 */
  --muted: 82 82 82;     /* neutral-600 */
}

html.dark {
  color-scheme: dark;

  /* Theme tokens (dark) */
  --bg: 24 24 24;        /* neutral-950-ish */
  --fg: 245 245 245;     /* neutral-100 */
  --card: 23 23 23;      /* neutral-900 */
  --border: 64 64 64;    /* neutral-700 */
  --muted: 163 163 163;  /* neutral-400 */
}

body {
  font-feature-settings: "ss01" 1, "ss02" 1;
}

a {
  text-decoration: none;
}


/* -------------------------------------------------------
   Cards
------------------------------------------------------- */

.card {
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover {
  transform: translateY(-1px);
}


/* -------------------------------------------------------
   Line clamp
------------------------------------------------------- */

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* -------------------------------------------------------
   Form controls
------------------------------------------------------- */

input,
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgb(var(--border));
  border-radius: 14px;
  outline: none;
  background: rgb(var(--card));
  color: rgb(var(--fg));
}

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

input:focus,
textarea:focus,
select:focus {
  border-color: rgb(var(--muted));
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}


/* -------------------------------------------------------
   Logos
------------------------------------------------------- */

/* По умолчанию (светлая тема) показываем обычный логотип */
.logo-light {
  display: block;
}

.logo-dark {
  display: none;
}

/* В тёмной теме — наоборот */
html.dark .logo-light {
  display: none;
}

html.dark .logo-dark {
  display: block;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.5rem 1rem;           /* примерно px-4 py-2 */
  font-size: 0.875rem;            /* text-sm */
  font-weight: 500;               /* font-medium */

  background: rgb(var(--fg));     /* в светлой теме — тёмная */
  color: rgb(var(--card));
  border: 1px solid rgb(var(--border));

  transition: background-color .15s ease, opacity .15s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

/* В тёмной теме — делаем её мягче и отличимой от фона */
html.dark .btn-primary {
  background: rgb(var(--border)); /* не чёрная, а приглушённая */
  color: rgb(var(--fg));
}