/* NeuroGammon Brand — Light Theme (для маркетинговых лендингов)
   Тёплая кремовая палитра, Space Grotesk + Inter.
   Используется на neurogammon.ru / club / invest / offer / fairness.
   В самой игре (play.neurogammon.ru) остаётся тёмная brand.css.
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Surface — тёплый кремовый */
  --paper:       #FAF6EE;   /* основной фон */
  --paper-2:     #F2EBDD;   /* карточки, секции */
  --paper-3:     #E8DFC9;   /* hover-блоки */

  /* Brand — те же brass + terracotta, но насыщеннее на светлом */
  --brass:       #B89150;   /* акцент №1, кнопки */
  --brass-2:     #946F36;   /* hover */
  --brass-3:     #D6B375;   /* подсветка */
  --terracotta:  #C8553D;   /* акцент №2, восклицания */

  /* Текст */
  --ink:         #1A1A1A;   /* заголовки */
  --ink-2:       #2D2D2D;   /* основной текст */
  --muted:       #7A7064;   /* подписи, мета */

  /* Helpers */
  --line:        rgba(0,0,0,.10);
  --line-brass:  rgba(184,145,80,.30);

  /* Status */
  --win:         #2E8540;
  --loss:        #B8412A;

  /* Type */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
}

/* — Wordmark — */
.brand-row {
  display: flex; align-items: center; gap: 12px;
}
.brand-row .logo-img {
  width: 38px; height: 38px;
  flex: 0 0 auto;
}
.brand-row .word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.brand-row .word i {
  color: var(--brass);
  font-style: normal;
}

/* — Eyebrow / tech labels — */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-2);
}

/* — Buttons — */
button.btn-primary, .btn-primary {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  padding: 12px 22px;
  border-radius: 9px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s;
  text-decoration: none;
  display: inline-block;
}
button.btn-primary:hover:not(:disabled), .btn-primary:hover {
  background: var(--brass);
  border-color: var(--brass);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -4px rgba(184,145,80,.35);
}

button.btn-ghost, .btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 11px 20px;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.btn-ghost:hover, .btn-ghost:hover {
  border-color: var(--brass);
  color: var(--brass-2);
}

/* — Input — */
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.96rem;
}
input:focus {
  outline: none;
  border-color: var(--brass);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(184,145,80,.15);
}

/* — Cards / surfaces — */
.surface {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
}
.surface-warm {
  background: linear-gradient(135deg, #FFF8E8, #F4ECDA);
  border: 1px solid var(--line-brass);
  border-radius: 16px;
}

/* — Hairlines / dividers — */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-brass) 20%, var(--line-brass) 80%, transparent);
  width: 100%;
}