/* ============ cgram · дизайн-система ============
   Тёплый «бумажный» стиль: крем + терракота, Fraunces + Inter.
   Светлая и тёмная темы через [data-theme]. */

:root {
  --bg:          #F5F1EB;
  --bg-panel:    #FBF8F2;
  --bg-rail:     #EFE7D7;
  --bg-elevated: #FFFFFF;
  --bg-hover:    #F2EADA;
  --bg-pill:     #EFE7D7;

  --accent:       #C43829;
  --accent-hover: #A82E22;
  --accent-weak:  #E5C9C3;
  --accent-tint:  rgba(196, 56, 41, 0.12);

  --text:        #2B2622;
  --text-2:      #6B6259;
  --text-3:      #9A9082;
  --placeholder: #B5AC9F;

  --border:   #E5DDD0;
  --border-2: #F0EBE3;

  --green: #4A8B6F;
  --on-accent: #FFFFFF;

  --shadow-card: 0 14px 36px -16px rgba(43, 38, 34, 0.18);
  --shadow-soft: 0 1px 0 rgba(43, 38, 34, 0.04);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[data-theme="dark"] {
  --bg:          #1A1613;
  --bg-panel:    #211C18;
  --bg-rail:     #16120F;
  --bg-elevated: #2A2420;
  --bg-hover:    #2F2823;
  --bg-pill:     #2A2420;

  --accent:       #E0533F;
  --accent-hover: #EC6650;
  --accent-weak:  #5A332C;
  --accent-tint:  rgba(224, 83, 63, 0.20);

  --text:        #EFEAE2;
  --text-2:      #B6AC9D;
  --text-3:      #877E70;
  --placeholder: #6E655A;

  --border:   #342F29;
  --border-2: #2A241F;

  --green: #6FB893;
  --on-accent: #FFFFFF;

  --shadow-card: 0 16px 40px -18px rgba(0, 0, 0, 0.6);
  --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.20);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: var(--bg);
  transition: background 0.25s ease, color 0.25s ease;
}

input, button, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

a { color: var(--accent); text-decoration: none; }

@keyframes cg-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cg-pulse-dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes cg-float-msg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- логотип ---------- */
.cg-logo {
  background: var(--accent);
  border-radius: 12px;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px var(--accent-tint);
  color: var(--on-accent);
  flex-shrink: 0;
}
.cg-logo > span { font: 600 19px/1 var(--sans); letter-spacing: 1px; transform: translateY(-2px); }
.cg-wordmark { font: 500 22px/1 var(--serif); letter-spacing: -0.01em; color: var(--text); }

/* ---------- кнопки ---------- */
.cg-btn {
  height: 50px; border: none; border-radius: 12px;
  background: var(--accent); color: var(--on-accent);
  font: 500 15px/1 var(--sans); letter-spacing: 0.01em;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.15s, transform 0.1s;
}
.cg-btn:hover { background: var(--accent-hover); }
.cg-btn:active { transform: translateY(1px); }
.cg-btn:disabled { background: var(--accent-weak); cursor: not-allowed; }

.cg-icon-btn {
  border: none; border-radius: 9px; background: transparent; color: var(--text-2);
  cursor: pointer; display: grid; place-items: center; transition: background 0.15s;
}
.cg-icon-btn:hover { background: var(--bg-rail); }

/* ---------- поля ---------- */
.cg-field { display: flex; flex-direction: column; gap: 7px; }
.cg-field__label { font: 500 12px/1 var(--sans); color: var(--text); letter-spacing: 0.02em; }
.cg-input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--border); background: var(--bg-elevated);
  border-radius: 10px; font: 400 14px/1 var(--sans); color: var(--text);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.cg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.cg-hint { font: 400 11px/1.4 var(--sans); color: var(--text-3); }

/* ---------- переключатель темы ---------- */
.cg-theme-toggle {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-2); cursor: pointer;
  display: grid; place-items: center; font-size: 16px; transition: background 0.15s, color 0.15s;
}
.cg-theme-toggle:hover { background: var(--bg-hover); }

/* ---------- аватары ---------- */
.cg-avatar {
  border-radius: 50%; display: grid; place-items: center;
  font: 500 14px/1 var(--sans); flex-shrink: 0;
}