/* ============================================================
   Wir haben reserviert — cool & techy reservation tracker
   Design tokens + base styles
   ============================================================ */

:root {
  /* Cool neutral surfaces */
  --bg:        oklch(98.4% 0.004 255);
  --bg-sunken: oklch(96.4% 0.006 255);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(98.8% 0.004 255);

  /* Ink */
  --ink:       oklch(22% 0.018 262);
  --ink-2:     oklch(44% 0.016 262);
  --ink-3:     oklch(60% 0.014 262);
  --ink-4:     oklch(72% 0.012 262);

  /* Lines */
  --line:      oklch(92.5% 0.006 262);
  --line-2:    oklch(88% 0.008 262);

  /* Techy accent (indigo-blue) — overridable by tweak */
  --accent:        oklch(56% 0.155 258);
  --accent-ink:    oklch(40% 0.14 258);
  --accent-soft:   oklch(95.5% 0.02 258);
  --accent-contrast: oklch(99% 0.01 258);

  /* Category hues — shared chroma/lightness, varied hue */
  --cat-rest:  oklch(64% 0.13 42);    /* restaurant — warm amber */
  --cat-rest-soft: oklch(95.5% 0.03 42);
  --cat-hotel: oklch(60% 0.10 192);   /* hotel — cool teal */
  --cat-hotel-soft: oklch(95.5% 0.025 192);
  --cat-train: oklch(58% 0.13 268);   /* train/flight — indigo */
  --cat-train-soft: oklch(95.5% 0.028 268);

  /* Status */
  --ok:   oklch(60% 0.12 158);
  --ok-soft:   oklch(96% 0.03 158);
  --warn: oklch(70% 0.13 70);
  --warn-soft: oklch(96.5% 0.04 75);

  /* Up Next hero — intentionally dark in both themes */
  --hero-bg:  oklch(22% 0.018 262);
  --hero-ink: oklch(97% 0 0);
  --hero-dim: oklch(72% 0.012 262);

  /* Mobile nav surface */
  --nav-bg: oklch(100% 0 0 / 0.86);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Shadow — cool tinted */
  --shadow-sm: 0 1px 2px oklch(40% 0.03 262 / 0.06), 0 1px 1px oklch(40% 0.03 262 / 0.04);
  --shadow-md: 0 4px 16px oklch(40% 0.04 262 / 0.08), 0 1px 3px oklch(40% 0.03 262 / 0.06);
  --shadow-lg: 0 18px 48px oklch(36% 0.05 262 / 0.16), 0 4px 12px oklch(36% 0.04 262 / 0.08);

  /* Type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Density (overridable) */
  --gap: 14px;
  --card-pad: 18px;
}

/* ============================================================
   DARK THEME
   ============================================================ */
:root[data-theme="dark"] {
  --bg:        oklch(17% 0.012 262);
  --bg-sunken: oklch(13.5% 0.012 262);
  --surface:   oklch(21% 0.014 262);
  --surface-2: oklch(25% 0.016 262);

  --ink:   oklch(96% 0.004 262);
  --ink-2: oklch(80% 0.010 262);
  --ink-3: oklch(64% 0.012 262);
  --ink-4: oklch(50% 0.012 262);

  --line:   oklch(29% 0.012 262);
  --line-2: oklch(36% 0.014 262);

  --cat-rest:  oklch(74% 0.13 42);   --cat-rest-soft:  oklch(33% 0.055 42);
  --cat-hotel: oklch(72% 0.10 192);  --cat-hotel-soft: oklch(31% 0.045 192);
  --cat-train: oklch(72% 0.12 268);  --cat-train-soft: oklch(33% 0.055 268);

  --ok:   oklch(72% 0.13 158);  --ok-soft:   oklch(30% 0.05 158);
  --warn: oklch(78% 0.13 75);   --warn-soft: oklch(33% 0.06 75);

  --hero-bg:  oklch(26.5% 0.022 262);
  --hero-ink: oklch(97% 0 0);
  --hero-dim: oklch(68% 0.012 262);

  --nav-bg: oklch(21% 0.014 262 / 0.86);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.35), 0 1px 1px oklch(0% 0 0 / 0.25);
  --shadow-md: 0 4px 16px oklch(0% 0 0 / 0.42), 0 1px 3px oklch(0% 0 0 / 0.3);
  --shadow-lg: 0 18px 48px oklch(0% 0 0 / 0.55), 0 4px 12px oklch(0% 0 0 / 0.35);
}

/* Smooth theme transition */
body, .sidebar, .main, .res-card, .res-row, .modal, .slideover,
.searchbar, .ghost-btn, .icon-btn, .chip, .tl-node, .bottomnav {
  transition: background-color .28s ease, border-color .28s ease, color .2s ease;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100%; }

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* Scrollbar — slim cool */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 99px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ---- Density variants ---- */
.density-compact { --gap: 9px; --card-pad: 13px; }
.density-comfy   { --gap: 20px; --card-pad: 24px; }

/* ---- Reusable bits ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  white-space: nowrap;
  transition: all 0.14s ease;
}
.chip:hover { border-color: var(--ink-4); color: var(--ink); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* Keyframes */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.live-dot {
  width: 7px; height: 7px; border-radius: 99px;
  background: var(--ok);
  box-shadow: 0 0 0 0 var(--ok);
  animation: pulse 2s ease-in-out infinite;
}