/*
 * Kumo-aligned design tokens (Cloudflare design system).
 * Standalone CSS custom properties mirroring Kumo's semantic tokens
 * (https://kumo-ui.com/colors) for a static, build-free frontend.
 * Werte 1:1 aus der Kumo-Token-Referenz; light/dark via light-dark().
 */
:root {
  color-scheme: light dark;

  /* Surface hierarchy */
  --kumo-canvas: light-dark(oklch(98.75% 0 0), oklch(10% 0 0));
  --kumo-base: light-dark(#fff, oklch(17% 0 0));
  --kumo-elevated: light-dark(oklch(98% 0 0), oklch(12% 0 0));
  --kumo-recessed: light-dark(oklch(96% 0 0), oklch(15% 0 0));
  --kumo-tint: light-dark(oklch(97% 0 0), oklch(26.9% 0 0));
  --kumo-contrast: light-dark(oklch(8.5% 0 0), oklch(98.5% 0 0));

  /* Brand */
  --kumo-brand: light-dark(oklch(57.72% 0.2324 260), color-mix(in oklch, oklch(57.72% 0.2324 260), black 10%));
  --kumo-brand-hover: oklch(48.8% 0.243 264.376);
  --kumo-brand-accent: #f6821f;

  /* Status */
  --kumo-info: oklch(68.5% 0.169 237.323);
  --kumo-info-tint: light-dark(oklch(93.2% 0.032 255.6 / 0.45), oklch(38% 0.145 265.5 / 0.22));
  --kumo-success: light-dark(oklch(59.6% 0.145 163.225), oklch(76.5% 0.177 163.223));
  --kumo-success-tint: light-dark(oklch(96.2% 0.043 156.7 / 0.57), oklch(39.3% 0.096 152.3 / 0.2));
  --kumo-warning: light-dark(oklch(73.9% 0.177 58.2), oklch(64.5% 0.168 50));
  --kumo-warning-tint: light-dark(oklch(93.1% 0.107 94.6 / 0.2), oklch(35.3% 0.079 65 / 0.37));
  --kumo-danger: light-dark(oklch(63.7% 0.237 25.331), oklch(57.7% 0.245 27.325));
  --kumo-danger-tint: light-dark(oklch(93.6% 0.032 17.7 / 0.42), oklch(42.9% 0.176 28.7 / 0.17));

  /* Text */
  --kumo-text-default: light-dark(oklch(21% 0.006 285.885), oklch(97% 0 0));
  --kumo-text-strong: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
  --kumo-text-subtle: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
  --kumo-text-inverse: light-dark(oklch(97% 0 0), oklch(20.5% 0 0));
  --kumo-text-link: light-dark(oklch(42.4% 0.199 265.638), oklch(70.7% 0.165 254.624));
  --kumo-text-success: light-dark(oklch(43.2% 0.095 166.913), oklch(90.5% 0.093 164.15));
  --kumo-text-danger: light-dark(oklch(50.5% 0.213 27.518), oklch(70.4% 0.191 22.216));

  /* Borders */
  --kumo-hairline: light-dark(oklch(93.5% 0 0), oklch(26.9% 0 0));
  --kumo-line: light-dark(oklch(14.5% 0 0 / 0.1), oklch(32% 0 0));

  --kumo-radius: 8px;
  --kumo-radius-sm: 6px;
  --kumo-shadow: 0 1px 2px light-dark(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.3)),
    0 0 0 1px var(--kumo-line);
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--kumo-canvas);
  color: var(--kumo-text-default);
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.kumo-shell { max-width: 960px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.kumo-topbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--kumo-hairline);
  margin-bottom: 1.5rem;
}
.kumo-logo {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--kumo-radius-sm);
  background: var(--kumo-brand-accent);
  color: #fff; font-weight: 700; font-size: 0.9rem;
}
.kumo-topbar h1 { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--kumo-text-strong); }
.kumo-topbar .sub { color: var(--kumo-text-subtle); font-size: 0.85rem; margin-left: auto; }

h2 { font-size: 0.95rem; font-weight: 600; color: var(--kumo-text-strong); margin: 2rem 0 0.75rem; }

.kumo-card {
  background: var(--kumo-base);
  border: 1px solid var(--kumo-hairline);
  border-radius: var(--kumo-radius);
  box-shadow: var(--kumo-shadow);
  padding: 1.25rem;
}

.kumo-muted { color: var(--kumo-text-subtle); font-size: 0.875rem; }
.kumo-link { color: var(--kumo-text-link); text-decoration: none; }
.kumo-link:hover { text-decoration: underline; }

code, .kumo-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82em;
  background: var(--kumo-tint);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* Buttons */
.kumo-btn {
  font: inherit;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--kumo-radius-sm);
  border: 1px solid var(--kumo-line);
  background: var(--kumo-base);
  color: var(--kumo-text-default);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.kumo-btn:hover { background: var(--kumo-tint); }
.kumo-btn-primary {
  background: var(--kumo-brand);
  color: #fff;
  border-color: transparent;
}
.kumo-btn-primary:hover { background: var(--kumo-brand-hover); }

/* Table */
.kumo-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.kumo-table th {
  text-align: left;
  font-weight: 600;
  color: var(--kumo-text-subtle);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--kumo-hairline);
}
.kumo-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--kumo-hairline); }
.kumo-table tr:last-child td { border-bottom: none; }
.kumo-table tr:hover td { background: var(--kumo-tint); }

/* Badge */
.kumo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--kumo-tint);
  color: var(--kumo-text-subtle);
}
.kumo-badge-success { background: var(--kumo-success-tint); color: var(--kumo-text-success); }
.kumo-badge-danger { background: var(--kumo-danger-tint); color: var(--kumo-text-danger); }
.kumo-badge-neutral { background: var(--kumo-tint); color: var(--kumo-text-subtle); }

.kumo-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; }
.kumo-dot-on { background: var(--kumo-success); }
.kumo-dot-off { background: var(--kumo-danger); }
.kumo-dot-idle { background: var(--kumo-hairline); }

/* Banner / Callout */
.kumo-callout {
  display: flex;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: var(--kumo-radius);
  background: var(--kumo-warning-tint);
  color: var(--kumo-text-default);
  font-size: 0.875rem;
}
.kumo-callout-info { background: var(--kumo-info-tint); }

/* Inputs */
.kumo-input, .kumo-textarea {
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--kumo-line);
  border-radius: var(--kumo-radius-sm);
  background: var(--kumo-base);
  color: var(--kumo-text-default);
}
.kumo-textarea { font-family: ui-monospace, monospace; resize: vertical; }
.kumo-input:focus, .kumo-textarea:focus {
  outline: 2px solid var(--kumo-brand);
  outline-offset: -1px;
}

/* Empty state */
.kumo-empty {
  text-align: center;
  color: var(--kumo-text-subtle);
  padding: 2rem 1rem;
  font-size: 0.9rem;
}

/* Event feed */
.kumo-feed {
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  max-height: 320px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.kumo-feed-line {
  padding: 0.4rem 0.6rem;
  border-radius: var(--kumo-radius-sm);
  background: var(--kumo-recessed);
  color: var(--kumo-text-default);
}
.kumo-feed-line time { color: var(--kumo-text-subtle); margin-right: 0.5rem; }

.kumo-copy {
  border: none;
  background: var(--kumo-tint);
  color: var(--kumo-text-subtle);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.kumo-copy:hover { color: var(--kumo-text-default); }

pre.kumo-pre {
  background: var(--kumo-recessed);
  border: 1px solid var(--kumo-hairline);
  border-radius: var(--kumo-radius);
  padding: 1rem;
  overflow: auto;
  font-size: 0.8rem;
}