/* ==========================================================
   Soneli — shared design tokens
   Mirror of landing page variables so every artefact in /soneli
   inherits the same visual language.
   ========================================================== */

:root {
  --cream: #F8F5F0;
  --cream-2: #F1ECE3;
  --cream-3: #E8E1D2;
  --espresso: #2A1F17;
  --espresso-2: #4A3A2C;
  --ink: #1C140E;
  --gray: #4A4A4A;
  --gray-2: #8A8070;
  --rule: rgba(42, 31, 23, 0.18);
  --rule-soft: rgba(42, 31, 23, 0.10);
  --white: #FFFFFF;

  /* Station accents (keep in sync with landing) */
  --gym: #E11D48;
  --cafe: #3D2817;
  --chill: #4A9FD9;
  --spa: #7A9B7A;
  --pop: #FF2D95;
  --pop-gold: #FFD700;
  --club-bg: #000000;
  --club-acid: #CFFF04;
  --fokus: #2A2A2A;
  --hits: #1E7FE5;
  --yoga: #C66B3D;
  --retro: #E6B04E;

  /* Semantic */
  --ok: #2F7D3A;
  --warn: #B85B1F;
  --err: #A8322C;

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}

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

html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* Shared chrome: editorial top bar + back link
   Usage: <header class="shell-nav"> ... </header> */
.shell-nav {
  border-bottom: 1px solid var(--rule);
  background: var(--cream);
}
.shell-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shell-nav .wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--espresso);
}
.shell-nav .back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-2);
  text-decoration: none;
}
.shell-nav .back:hover { color: var(--espresso); }

@media (max-width: 640px) {
  .shell-nav-inner { padding: 14px 20px; }
  .shell-nav .wordmark { font-size: 22px; }
  .shell-nav .back { font-size: 10px; }
}