:root {
  /* Brand */
  --app-brand: #4f46e5;
  --app-brand-600: #4338ca;
  --app-bg: #f6f7fb;

  /* Radius / shadow */
  --app-radius: 1rem;
  --app-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);

  /* Typography */
  --app-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Font color */
  --app-font-white: #fff;
  --app-font-black: #000;

  /* Buttons */
  --app-btn-vertical-pad: 0.3rem;
  --app-btn-horizontal-pad: 0.75rem;

  --app-btn-info: #4d4d4d;
  --app-btn-warning: #e66f08;

  /* Delete and errors */
  --app-delete: #cd2323;

  /* Safelist and success */
  --app-safelist-bg: #d1e7dd;
  --app-safelist-border: #a3cfbb;
  --app-safelist-font: #0a3622;
}

body {
  font-family: var(--app-font);
}

/* Background helper */
.bg-app {
  background: var(--app-bg);
}

/* Small brand mark in header */
.app-mark {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--app-brand);
  display: inline-block;
}