/* =========================================================
   Связаны Flowers — design tokens & global styles
   Vintage romance · warm cream · dusty rose + sage
   Mobile-first
   ========================================================= */

:root {
  /* warm neutrals — tuned to the logo's cream */
  --cream:       #EFE7D6;   /* page background, matches logo field */
  --cream-deep:  #E7DCC6;   /* alternating section */
  --paper:       #FBF6EC;   /* cards / surfaces */
  --paper-2:     #F5EEDF;   /* subtle card */
  --ink:         #2A2520;   /* primary text — warm near-black (logo line) */
  --ink-soft:    #6E6557;   /* muted text */
  --ink-faint:   #9C9384;   /* hints */
  --line:        #DDD1BC;   /* hairline borders */
  --line-soft:   #E8DECB;

  /* accents (shared chroma, varied hue) */
  --rose:        #C58A86;
  --rose-deep:   #A4655F;
  --rose-tint:   #EBD8D2;
  --sage:        #9DA587;
  --sage-deep:   #767E5E;
  --sage-tint:   #DDE0CE;

  /* type */
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display: "Cormorant", "Cormorant Garamond", Georgia, serif;

  /* shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --arch: 999px 999px 16px 16px / 320px 320px 16px 16px;

  --shadow-sm: 0 1px 2px rgba(42,37,32,.05), 0 2px 8px rgba(42,37,32,.04);
  --shadow-md: 0 6px 24px rgba(42,37,32,.09);
  --shadow-lg: 0 18px 50px rgba(42,37,32,.16);

  --header-h: 60px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint paper grain over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

#root { position: relative; z-index: 1; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
input, textarea, select { font-family: inherit; font-size: 16px; }

.serif { font-family: var(--display); font-weight: 500; letter-spacing: 0; }

/* eyebrow / kicker */
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--rose-deep);
  display: inline-flex; align-items: center; gap: 8px;
}
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--rose); }
.kicker.center::after { content: ""; width: 22px; height: 1px; background: var(--rose); }
.kicker.center { justify-content: center; }

/* layout helpers */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; position: relative; }
.section--alt { background: var(--cream-deep); }
.stack { display: flex; flex-direction: column; }
.muted { color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: .01em;
  padding: 13px 22px; min-height: 46px;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: #3a332b; box-shadow: var(--shadow-md); }
.btn--rose { background: var(--rose-deep); color: #fff; }
.btn--rose:hover { background: #92534e; box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(42,37,32,.03); }
.btn--block { width: 100%; }
.btn--sm { padding: 9px 15px; min-height: 38px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  transition: all .18s ease; white-space: nowrap;
}
.chip:hover { border-color: var(--rose); color: var(--ink); }
.chip--active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.chip .chip__count { font-size: 12px; opacity: .65; font-weight: 600; }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.badge--sage { background: var(--sage-tint); color: var(--sage-deep); }
.badge--rose { background: var(--rose-tint); color: var(--rose-deep); }
.badge--ink  { background: rgba(42,37,32,.08); color: var(--ink); }

/* ---------- arch placeholder ---------- */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, var(--paper-2) 0 11px, var(--cream-deep) 11px 22px);
  border: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: center;
}
.ph--arch { border-radius: var(--arch); }
.ph__tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: var(--ink-soft);
  background: rgba(251,246,236,.82); backdrop-filter: blur(2px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px; margin-bottom: 14px; letter-spacing: .02em;
}

/* ---------- cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

/* fields */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: .01em; }
.field .req { color: var(--rose-deep); }
.input, .textarea, .select {
  width: 100%; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(197,138,134,.18);
}
.textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.input.err, .textarea.err { border-color: #c0584f; box-shadow: 0 0 0 3px rgba(192,88,79,.14); }
.field .hint { font-size: 12px; color: var(--ink-faint); }
.field .errmsg { font-size: 12px; color: #b0493f; }

/* dividers */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* stars */
.stars { display: inline-flex; gap: 2px; color: var(--rose); }
.stars svg { width: 16px; height: 16px; }

/* scrollbar (admin tables etc) */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* fade/slide entrance — resting state is VISIBLE; animation is an
   enhancement applied only once the page is actually visible (body.sf-anim),
   so content never gets trapped invisible in a hidden/throttled tab. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.rise { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  body.sf-anim .rise { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
}

/* responsive scale-ups */
@media (min-width: 760px) {
  body { font-size: 17px; }
  .section { padding: 84px 0; }
  .wrap { padding: 0 32px; }
}