/* Заеднички токени и елементи за сајтот и менито. */
:root {
  --bg: #f3ede4;
  --bg-2: #ebe3d7;
  --card: #fbf8f3;
  --ink: #2a2420;
  --muted: #7a6e63;
  --line: #ddd2c3;
  --accent: #96673a;
  --accent-ink: #fff;
  --open: #4f7a4a;
  --closed: #a0503c;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
:root[data-mode="night"] {
  --bg: #131110;
  --bg-2: #1a1715;
  --card: #1d1a18;
  --ink: #efe7dc;
  --muted: #a39787;
  --line: #2f2925;
  --accent: #d9a35a;
  --accent-ink: #1a1410;
  --open: #8fbf7f;
  --closed: #e08a70;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  transition: background-color .8s var(--ease), color .8s var(--ease);
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Знак: CARBON + by B, како светлечкиот знак во локалот */
.mark { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.mark__word { font: 300 1.35rem/1 var(--sans); letter-spacing: .32em; margin-right: -.32em; }
.mark__by { display: flex; align-items: center; gap: .5em; font: italic 500 .8rem/1 var(--serif); margin-top: .3em; color: var(--muted); }
.mark__by::before, .mark__by::after { content: ""; width: 1.6em; height: 1px; background: currentColor; opacity: .7; }

.pill {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .35em .8em; border-radius: 99px;
  border: 1px solid var(--line); background: var(--card);
  font-size: .78rem; letter-spacing: .02em; white-space: nowrap;
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--closed); }
.pill.is-open .pill__dot { background: var(--open); box-shadow: 0 0 0 0 var(--open); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--open) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

.icon-btn {
  width: 38px; height: 38px; display: inline-grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card);
}
.icon-btn svg { width: 18px; height: 18px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; background: var(--card); padding: 2px; }
.seg button { border: 0; background: none; padding: .3em .7em; border-radius: 99px; font-size: .75rem; letter-spacing: .08em; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

:root[data-mode="day"] .only-night, :root[data-mode="night"] .only-day { display: none !important; }

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