/* BloomLoop — переменные, сброс, типографика, тема.
   Направление: тёмный «luxe editorial» — глубокий фон, фотографии вперёд,
   серифные заголовки Playfair Display + чистый гротеск Manrope, розовый акцент. */

:root {
  --bg:        #0c0d12;
  --bg-2:      #0f1118;
  --surface:   #15171f;
  --surface-2: #1b1e28;
  --border:    #282b38;
  --border-2:  #3a3e4d;
  --fg:        #f4f1ec;          /* тёплый не-белый */
  --muted:     #9a94a6;
  --muted-2:   #6d6878;

  --pink:   #ff3d7f;             /* акцент бренда / купить */
  --pink-2: #ff7aa8;
  --green:  #46d989;             /* аукцион вверх */
  --orange: #ffaf47;            /* цена снижается */
  --blue:   #5aa6ff;            /* «вы здесь» */

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shadow:   0 10px 30px rgba(0,0,0,.45);
  --shadow-s: 0 4px 14px rgba(0,0,0,.35);
  --maxw: 1320px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* полупрозрачные подложки и «свечение» фона — переопределяются в светлой теме */
  --topbar: rgba(12,13,18,.82);
  --navbar: rgba(15,17,24,.94);
  --glow-1: rgba(255,61,127,.12);
  --glow-2: rgba(90,166,255,.06);
}

/* ===================== СВЕТЛАЯ ТЕМА ===================== */
html[data-theme="light"] {
  --bg:        #f7f3ef;
  --bg-2:      #fffdfb;
  --surface:   #ffffff;
  --surface-2: #f4eef1;
  --border:    #e8e1e6;
  --border-2:  #d5cdd6;
  --fg:        #241f2a;
  --muted:     #756e7d;
  --muted-2:   #a49caa;

  --shadow:   0 12px 34px rgba(60,30,60,.13);
  --shadow-s: 0 4px 14px rgba(60,30,60,.08);

  --topbar: rgba(255,253,251,.86);
  --navbar: rgba(255,253,251,.95);
  --glow-1: rgba(255,61,127,.10);
  --glow-2: rgba(90,166,255,.07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* лёгкая атмосфера: тёплое розовое свечение сверху */
  background-image:
    radial-gradient(1100px 520px at 78% -8%, var(--glow-1), transparent 60%),
    radial-gradient(900px 500px at -5% 0%, var(--glow-2), transparent 55%);
  background-attachment: fixed;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

button { font-family: inherit; color: inherit; }
select, input { font-family: inherit; }
a { color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-2); }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 6px; }

/* лого */
.logo {
  font-family: var(--serif);
  font-weight: 700; font-size: 22px; white-space: nowrap;
  letter-spacing: -.2px;
}
.logo .d { color: var(--pink); font-style: italic; }

/* верхний баннер прототипа */
.banner {
  background: var(--bg-2);
  color: var(--muted-2);
  font-size: 11px; letter-spacing: .2px;
  text-align: center; padding: 6px;
  border-bottom: 1px solid var(--border);
}

/* hero на витрине */
.hero { padding: 26px 0 6px; max-width: 640px; }
.hero h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -.5px;
}
.hero h1 em { color: var(--pink); font-style: italic; }
.hero p { color: var(--muted); font-size: 15px; margin-top: 10px; max-width: 540px; }

/* пустые / «скоро» экраны */
.center { text-align: center; padding: 80px 30px; max-width: 460px; margin: 0 auto; }
.center .big {
  font-family: var(--serif); font-size: 54px; color: var(--pink);
  margin-bottom: 10px; line-height: 1;
}
.center h2 { font-family: var(--serif); font-weight: 600; font-size: 24px; margin-bottom: 8px; }
.center p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.sec { font-size: 13px; color: var(--muted); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}