/* Copied verbatim from the hapimatic-brand-guide skill (assets/hapimatic-dark.css) on 2026-10-04 for issue #4542 — do not edit; tokens are the brand law, override in site.css.
   One change only: the product name in the original header comment is respelled "Hapimatic" (decision 37). Every rule below is byte-identical. */
/* ============================================================================
   Hapimatic-dark — turn-key design tokens + element defaults
   Drop in via one <link>. Dark-only, charcoal + mint, iOS-flavored.
   Source of truth: ~/.claude/charts/echarts-hapimatic-dark.json + web/src palette.
   ========================================================================== */

:root {
  /* Backgrounds */
  --hb-bg: #1c1c1e;
  --hb-surface: #2c2c2e;
  --hb-raised: #3a3a3c;
  --hb-deepest: #161618;

  /* Text */
  --hb-text: #ffffff;
  --hb-text-secondary: #c7c7cc;
  --hb-muted: #8e8e93;

  /* Primary accent — mint */
  --hb-mint: #5ae6ab;
  --hb-mint-dim: #2f9c74;
  --hb-mint-deep: #0c3327;

  /* Data series + accents */
  --hb-amber: #f59e0b;
  --hb-blue: #60a5fa;
  --hb-red: #f87171;
  --hb-violet: #a78bfa;
  --hb-teal: #2dd4bf;

  /* Semantic */
  --hb-success: #5ae6ab;
  --hb-warning: #f59e0b;
  --hb-error: #f87171;
  --hb-info: #60a5fa;

  /* Lines */
  --hb-line: rgba(255, 255, 255, 0.10);
  --hb-line-strong: rgba(255, 255, 255, 0.18);

  /* Radii */
  --hb-r-sm: 6px;
  --hb-r-md: 10px;
  --hb-r-lg: 14px;
  --hb-r-pill: 999px;

  /* Type */
  --hb-font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --hb-maxw: 1120px;
  --hb-gutter: 22px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--hb-bg);
  color: var(--hb-text-secondary);
  font-family: var(--hb-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--hb-text);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
}
h1 { font-size: 40px; line-height: 1.1; }
h2 { font-size: 25px; }
h3 { font-size: 16px; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--hb-mint); text-decoration: none; }
a:hover { text-decoration: underline; }

small, .hb-eyebrow, .hb-muted { color: var(--hb-muted); }
.hb-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hb-mint);
  font-weight: 600;
}

code, kbd {
  font-family: var(--hb-mono);
  font-size: 0.9em;
  color: var(--hb-mint);
  background: rgba(90, 230, 171, 0.10);
  padding: 1px 5px;
  border-radius: 5px;
}
pre {
  background: var(--hb-surface);
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r-md);
  padding: 14px;
  overflow: auto;
}
pre code { background: none; color: var(--hb-text-secondary); padding: 0; }

blockquote {
  border-left: 2px solid var(--hb-line-strong);
  margin: 1em 0;
  padding-left: 14px;
  color: var(--hb-muted);
}

hr { border: 0; border-top: 1px solid var(--hb-line); margin: 1.5em 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hb-line); }
th { color: var(--hb-muted); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
tr:hover td { background: rgba(255, 255, 255, 0.02); }

.hb-wrap { max-width: var(--hb-maxw); margin: 0 auto; padding: 0 var(--hb-gutter); }

.hb-card {
  background: var(--hb-surface);
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r-lg);
  padding: 20px;
}

.hb-pill {
  display: inline-block;
  font-size: 12px;
  color: var(--hb-text-secondary);
  background: rgba(44, 44, 46, 0.8);
  border: 1px solid var(--hb-line);
  padding: 5px 11px;
  border-radius: var(--hb-r-pill);
}

/* Status tags */
.hb-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--hb-r-pill); }
.hb-tag--success { background: var(--hb-mint-deep); color: var(--hb-mint); border: 1px solid var(--hb-mint-dim); }
.hb-tag--warning { background: #3a2c10; color: var(--hb-amber); border: 1px solid #7a5a1f; }
.hb-tag--error { background: #3a1414; color: var(--hb-red); border: 1px solid #7a2f2f; }