/* Design tokens. Components only use the semantic variables, so a sector
   theme or a band can re-colour everything inside it. */
:root {
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0938rem);
  --step-1: clamp(1.125rem, 1.07rem + 0.3vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.26rem + 0.5vw, 1.6875rem);
  --step-3: clamp(2.125rem, 1.35rem + 3.3vw, 4.125rem);
  --step-4: clamp(2.75rem, 1.2rem + 6.6vw, 6.75rem);

  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --max: 82rem;
  --section: clamp(4.5rem, 9vw, 9rem);
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: clamp(20px, 2.4vw, 32px);

  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 32px -12px rgb(0 0 0 / 0.18);
  --salmon: #ff7859;
}

/* Gastronomie: paper, forest, terracotta */
:root,
[data-sector='gastro'] {
  color-scheme: light;
  --bg: #f6f2e8;
  --surface: #fffcf4;
  --ink: #1d2a22;
  --muted: #566257;
  --line: rgb(29 42 34 / 0.15);
  --accent: #b44d2c;
  --accent-ink: #fff8ea;
  --tint: #e2e9dd;
  --tint-strong: #c9d6c5;
  --deep: #1f2e25;
  --on-deep: #f4efe1;
  --btn-bg: var(--ink);
  --btn-fg: var(--bg);
  --ok: #4f7a5b;
  --warn: #c98a5c;
}

/* Eventlocations: midnight, lilac */
[data-sector='events'] {
  color-scheme: dark;
  --bg: #13162a;
  --surface: #1d2139;
  --ink: #f3eee3;
  --muted: #a8abc4;
  --line: rgb(243 238 227 / 0.16);
  --accent: #cdb8ef;
  --accent-ink: #1a1830;
  --tint: #1a1e36;
  --tint-strong: #2b2f52;
  --deep: #0c0e1c;
  --on-deep: #f3eee3;
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --ok: #8fc7a4;
  --warn: #e3b27e;
}

/* Hotels: sand, cocoa, clay */
[data-sector='hotels'] {
  color-scheme: light;
  --bg: #f4eadb;
  --surface: #fcf6eb;
  --ink: #35251e;
  --muted: #6d584c;
  --line: rgb(53 37 30 / 0.16);
  --accent: #a54d2c;
  --accent-ink: #fff6e8;
  --tint: #e8d8c2;
  --tint-strong: #d6bfa3;
  --deep: #3a2921;
  --on-deep: #f7eddc;
  --btn-bg: var(--ink);
  --btn-fg: var(--bg);
  --ok: #6b7f5a;
  --warn: #c58f62;
}

/* Bands re-map the semantic colours for everything inside them. */
.band-tint { --bg: var(--tint); background: var(--bg); }
.band-deep {
  --bg: var(--deep);
  --surface: color-mix(in srgb, var(--on-deep) 7%, var(--deep));
  --ink: var(--on-deep);
  --muted: color-mix(in srgb, var(--on-deep) 68%, var(--deep));
  --line: color-mix(in srgb, var(--on-deep) 18%, transparent);
  --btn-bg: var(--on-deep);
  --btn-fg: var(--deep);
  background: var(--bg);
  color: var(--ink);
}
[data-sector='gastro'] .band-deep,
[data-sector='hotels'] .band-deep { --accent: var(--salmon); }