/* theme.css: цвета светлой и тёмной темы dmwells.design */

:root {
  --rad: 12px;
  --bg: #e9ebee;
  --surface: #f6f7f8;
  --ink: #161d27;
  --muted: #4a5563;
  --line: #c9ced6;
  --accent: #55708f;
  --accent-ink: #fff;
  --chip: #dde1e6;
  --tile: #55708f;
  --f-display: 'Unbounded','Arial Black',system-ui,sans-serif;
  --f-body: 'Onest',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color-scheme: light;
  --c-logo: #55708f;
  --c-id: #55708f;
  --c-print: #55708f;
  --c-card: #55708f;
  --c-pack: #55708f;
  --c-ad: #55708f;
  --c-ill: #55708f;
}

html[data-theme=dark] {
  --bg: #023753;
  --surface: #0a4a6d;
  --ink: #eef7fb;
  --muted: #a9c8d8;
  --line: #1d5f84;
  --accent: #44f9fd;
  --accent-ink: #023753;
  --chip: #0d4e73;
  --tile: #26405f;
  color-scheme: dark;
  --c-logo: #26405f;
  --c-id: #264a42;
  --c-print: #41405f;
  --c-card: #1f4b66;
  --c-pack: #22524f;
  --c-ad: #386B68;
  --c-ill: #393f64;
}

/* Цифры в плитках: на тёмном фоне --tile почти сливается с --surface, поэтому берём акцентный цвет */
html[data-theme=dark] .role .n,
html[data-theme=dark] .ph .big {
  color: var(--accent);
  opacity: .5;
}

/* Кнопка «Написать в Telegram» в блоке .contact: тёмно-синий текст и иконка (#023753) на голубом фоне.
   Селектор с html[data-theme=dark] нужен, чтобы перебить правило
   html[data-theme=dark] .btn{color:#fff} из стилей страниц. */
.contact .btn:not(.out),
html[data-theme=dark] .contact .btn:not(.out) {
  background: #44f9fd;
  border-color: #44f9fd;
  color: #023753;
}
/* иконка в кнопке наследует цвет текста: тёмно-синий */
.contact .btn:not(.out) svg,
.contact .btn:not(.out) svg * {
  color: #023753;
  stroke: currentColor;
}

/* Базовая вёрстка страницы: одинаковая на всех страницах, чтобы текст не смещался при переходе между ними.
   Меняете здесь, меняется везде. */
html{scroll-behavior:smooth;scrollbar-gutter:stable;scroll-padding-top:calc(61px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;padding-inline:20px;padding-top:env(safe-area-inset-top,0px)}

/* Общая шапка: логотип, переключатель темы, строка навигации.
   Одинаковая на всех страницах, поэтому живёт здесь, а не внутри страниц. */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);margin-inline:-20px;padding-inline:20px;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.logo{font-family:var(--f-display);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.logo span{color:var(--accent)}
.logo-w{display:flex;align-items:center;gap:10px}
.tt{display:inline-flex;flex:none;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;align-items:center;justify-content:center}
.tt svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tt .sun{display:none}
html[data-theme=dark] .tt .moon{display:none}
html[data-theme=dark] .tt .sun{display:block}

/* Шапка справа: кружок со списком проектов и кнопка «Обсудить» (как на главной) */
.nav{position:relative}
.m-cta{display:flex;align-items:center;gap:10px}
.m-cta .btn{height:40px;box-sizing:border-box;line-height:1}
.btn.cta-m{display:none}
.bk-m{order:-1;display:inline-flex;flex:none;width:40px;height:40px;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-radius:50%;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;transition:background-color .18s,color .18s}
.bk-m[aria-expanded=true]{background:var(--accent);color:var(--accent-ink)}
.bk-menu{display:block;position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:230px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.bk-menu[hidden]{display:none}
.bk-menu a{display:flex;align-items:center;gap:12px;padding:14px 18px;font-family:var(--f-body);font-size:15px;line-height:1.3;color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
.bk-menu a:first-child{border-top:0}
.bk-menu .bi{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bk-menu a:active,.bk-menu a:focus-visible{background:var(--accent);color:var(--accent-ink)}
@media(hover:hover){.bk-menu a:hover{background:var(--accent);color:var(--accent-ink)}}
@media(max-width:760px){.btn.cta-d{display:none}.btn.cta-m{display:inline-flex}.m-cta .btn.cta-m{display:none}.m-cta{gap:6px}.nav{gap:8px}}