/* Shared building blocks for "The Glass Office". Load after tokens.css.
   See docs/design-system.md for when to use each one. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink-1);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.06; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--text); }
a:hover { color: var(--teal); }
img { max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Buttons and pills */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: var(--pill);
  font: 700 var(--fs-ui)/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  transition: background-color .15s, border-color .15s;
}
.btn:hover { border-color: var(--text-2); color: var(--text); }
.btn-primary { background: var(--teal); border-color: var(--teal); color: var(--teal-ink); }
.btn-primary:hover { background: #45D4D1; border-color: #45D4D1; color: var(--teal-ink); }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: var(--fs-body); }

.pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pills button {
  min-height: 36px; padding: 0 16px; border-radius: var(--pill); cursor: pointer;
  font: 600 var(--fs-ui)/1 var(--font-body); color: var(--text);
  background: transparent; border: 1px solid var(--line-strong);
}
.pills button.active, .pills button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--teal-ink); font-weight: 800; }

/* Surfaces */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.glass {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line-strong);
}

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--pill); padding: 2px 9px; font: 700 var(--fs-caption)/1.6 var(--font-body); }
.badge-teal { background: var(--teal-soft); color: var(--teal-text); }
.badge-amber { background: var(--amber-soft); color: var(--amber-text); }
.badge-orange { background: var(--orange-soft); color: var(--orange-text); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); display: inline-block; }

/* Stat tile */
.stat { padding: 16px; }
.stat-label { font-size: var(--fs-caption); color: var(--text-3); font-weight: 600; }
.stat-value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stat-value small { font-size: 1rem; color: var(--text-3); font-weight: 600; }

/* Person row */
.person { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.person:last-child { border-bottom: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 800 0.6875rem/1 var(--font-body); background: var(--teal-soft); color: var(--teal-text); flex: 0 0 auto; }

/* Icons: inline SVG, 24 grid, 2px stroke */
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}