/* ─────────────────────────────────────────────────────────────
   ПОЗОВИ · base.css
   Токены, типографика, общие элементы. Ночь — единственная тема.
   ───────────────────────────────────────────────────────────── */

:root{
  /* цвет */
  --night:      #070A13;   /* чернильная ночь — общий фон */
  --dusk:       #0C111F;   /* приподнятая поверхность */
  --dusk-2:     #111828;   /* поля ввода, ховеры */
  --star:       #EDEBE4;   /* тёплый звёздный — основной текст */
  --faded:      #9BA0B4;   /* вторичный текст */
  --dim:        #5E6478;   /* третичный, подписи */
  --candle:     #E2A14E;   /* свечной янтарь — действие */
  --candle-up:  #F0B968;   /* янтарь при нажатии/ховере */
  --rose:       #C4455C;   /* кармин — только моменты «да» */
  --line:       rgba(237, 235, 228, .13);
  --line-soft:  rgba(237, 235, 228, .07);

  /* шрифт */
  --f-display: "Prata", "Georgia", serif;
  --f-body:    "Onest", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", "Consolas", ui-monospace, monospace;

  /* шкала */
  --s1: 4px;  --s2: 8px;  --s3: 14px; --s4: 22px;
  --s5: 34px; --s6: 52px; --s7: 80px; --s8: 120px;
}
/* на телефоне вертикальный ритм плотнее — без пустых полей */
@media (max-width: 720px){
  :root{ --s6: 40px; --s7: 54px; --s8: 76px; }
}
:root{
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --btn-ink: #14100A;          /* текст на янтарной кнопке */
  --sel-bg: rgba(226, 161, 78, .32);
}

/* ── тема «рассвет»: светлая, розово-винная (meet.*) ── */
:root[data-theme="dawn"]{
  --night:      #FDF9FA;
  --dusk:       #F9EFF2;
  --dusk-2:     #F4E6EA;
  --star:       #46242F;
  --faded:      #8A6672;
  --dim:        #A8848F;
  --candle:     #B23A5E;
  --candle-up:  #C64A70;
  --rose:       #C03A55;
  --line:       rgba(70, 36, 47, .18);
  --line-soft:  rgba(70, 36, 47, .09);
  --btn-ink:    #FFF6F4;
  --sel-bg:     rgba(178, 58, 94, .22);
}

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--night);
  color: var(--star);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection{ background: var(--sel-bg); color: var(--star); }

/* «рассвет»: мягкие формы вместо строгих — кнопки, лейблы, воздух */
:root[data-theme="dawn"] .btn{ border-radius: 16px; }
:root[data-theme="dawn"] .btn-solid{
  box-shadow: 0 12px 26px -12px rgba(178, 58, 94, .5);
}
:root[data-theme="dawn"] .btn-solid:hover{
  box-shadow: 0 14px 30px -12px rgba(178, 58, 94, .6);
}
:root[data-theme="dawn"] .btn-ghost{
  background: rgba(255, 255, 255, .55);
}
:root[data-theme="dawn"] .t-label,
:root[data-theme="dawn"] .field-label{
  font-family: var(--f-body);
  text-transform: none;
  letter-spacing: .01em;
  font-size: 13px;
  font-weight: 500;
}
:root[data-theme="dawn"] input[type="text"],
:root[data-theme="dawn"] textarea{
  border-radius: 0;
}

/* рассветное небо: мягкий градиент за канвасом */
:root[data-theme="dawn"] body{
  background:
    radial-gradient(120% 60% at 78% -8%, rgba(247, 213, 221, .6) 0%, transparent 55%),
    radial-gradient(110% 70% at 12% 108%, rgba(240, 199, 210, .5) 0%, transparent 60%),
    linear-gradient(180deg, #FEFBFC 0%, #FDF7F8 45%, #F9EDF0 100%);
  background-attachment: fixed;
}

/* ── типографика ── */

.t-display{
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .003em;
  text-wrap: balance;
  margin: 0;
}

.t-label{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dim);
}

.t-mono{
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

p{ margin: 0; }

a{ color: inherit; }

/* ── кнопки ── */

.btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 3px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  transition: background .22s var(--ease-soft),
              color .22s var(--ease-soft),
              border-color .22s var(--ease-soft),
              transform .22s var(--ease-out),
              opacity .3s var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.btn:focus-visible{ outline: 2px solid var(--candle); outline-offset: 3px; }
.btn:active{ transform: translateY(1px); }

.btn-solid{
  background: var(--candle);
  color: var(--btn-ink);
}
.btn-solid:hover{ background: var(--candle-up); }

.btn-ghost{
  background: transparent;
  color: var(--star);
  border: 1px solid var(--line);
}
.btn-ghost:hover{ border-color: var(--faded); }

.btn-quiet{
  background: transparent;
  color: var(--faded);
  border: 0;
  min-height: 44px;
  padding: 0 14px;
  font-weight: 500;
}
.btn-quiet:hover{ color: var(--star); }

.btn-wide{ width: 100%; }

/* ── поля ввода ── */

.field{ display: flex; flex-direction: column; gap: 9px; }

.field-label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
}

.field input[type="text"],
.field input[type="date"],
.field input[type="time"],
.field textarea{
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--star);
  font-family: var(--f-body);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 2px 12px;
  width: 100%;
  transition: border-color .25s var(--ease-soft);
  caret-color: var(--candle);
}
.field textarea{ resize: none; }
.field input::placeholder,
.field textarea::placeholder{ color: var(--dim); opacity: 1; }
.field input:focus,
.field textarea:focus{ outline: none; border-bottom-color: var(--candle); }

.field input[type="date"],
.field input[type="time"]{
  color-scheme: dark;
  font-family: var(--f-mono);
  font-size: 17px;
}

.field-hint{ font-size: 13px; color: var(--dim); }

/* ── сцена-канвас ── */

.sky{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sky canvas{ display: block; width: 100%; height: 100%; }

/* фоллбек без WebGL: тихий градиент */
.sky-fallback{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 80% at 50% 115%, rgba(226, 161, 78, .10) 0%, transparent 55%),
    radial-gradient(100% 70% at 80% -10%, rgba(58, 74, 126, .22) 0%, transparent 60%),
    var(--night);
}
:root[data-theme="dawn"] .sky-fallback{ background: transparent; }

/* ── появление при скролле ── */

.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-in{ opacity: 1; transform: none; }

/* ── тост ── */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  background: var(--dusk-2);
  border: 1px solid var(--line);
  color: var(--star);
  font-size: 14px;
  padding: 13px 20px;
  border-radius: 3px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-out);
  max-width: min(420px, calc(100vw - 40px));
  text-align: center;
}
.toast.is-on{ opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1; transform: none; }
}