/* @level atom */
/*
 * utilities.css — atomic primitives for composing UI.
 *
 * Each class is one concern. Stack classes on an element to compose:
 *   <div class="box box--col box--surface box--pad-md box--gap-sm">
 *
 * All values resolve through CSS custom properties (tokens.css).
 * Shapes here, values there.
 *
 * Inspired by harmony-experience's primitives/box.css and
 * typography.css. Loaded via <link> from any page that wants the
 * Melody design vocabulary.
 */

*, *::before, *::after { box-sizing: border-box; }

/* ── Box: layout primitive ─────────────────────────────────────── */
.box           { display: block; }
.box--row      { display: flex; flex-direction: row; }
.box--col      { display: flex; flex-direction: column; }
.box--grid     { display: grid; }
.box--wrap     { flex-wrap: wrap; }
.box--center   { align-items: center; }
.box--between  { justify-content: space-between; }
.box--grow     { flex: 1 1 0%; min-width: 0; }

.box--pad-xs   { padding: var(--m-size-space-1); }
.box--pad-sm   { padding: var(--m-size-space-2); }
.box--pad-md   { padding: var(--m-size-space-3); }
.box--pad-lg   { padding: var(--m-size-space-4); }

.box--gap-xs   { gap: var(--m-size-space-1); }
.box--gap-sm   { gap: var(--m-size-space-2); }
.box--gap-md   { gap: var(--m-size-space-3); }
.box--gap-lg   { gap: var(--m-size-space-4); }

.box--surface  { background: var(--m-surface-raised); }
.box--bordered { border: 1px solid var(--m-border-default); }
.box--radius   { border-radius: var(--m-size-radius-md); }

/* ── Stack: vertical rhythm with consistent gap ─────────────────── */
.stack             { display: flex; flex-direction: column; }
.stack > * + *     { margin-top: var(--m-size-space-2); }
.stack--lg > * + * { margin-top: var(--m-size-space-4); }

/* ── Text: typography primitives ─────────────────────────────────── */
.text-heading {
  font-size: var(--m-size-font-lg);
  color: var(--m-content-primary);
  font-weight: 600;
}
.text-body {
  font-size: var(--m-size-font-md);
  color: var(--m-content-secondary);
  line-height: 1.5;
}
.text-label {
  font-size: var(--m-size-font-sm);
  color: var(--m-content-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.text-caption {
  font-size: var(--m-size-font-sm);
  color: var(--m-content-tertiary);
}
.text-mono {
  font-family: var(--m-font-mono);
  font-variant-numeric: tabular-nums;
}
.text-accent { color: var(--m-interactive-primary); }
.text-danger { color: var(--m-color-status-danger); }

/* ── Section label: small uppercase + horizontal rule ───────────── */
.section-label {
  display: flex; align-items: center;
  gap: var(--m-size-space-3);
  margin: var(--m-size-space-6) 0 var(--m-size-space-3);
}
.section-label::after {
  content: ''; flex: 1; height: 1px;
  background: var(--m-border-default);
}

/* ── Button: interactive primitive ──────────────────────────────── */
button {
  font-family: inherit;
  font-size: var(--m-size-font-sm);
  background: var(--m-surface-raised);
  color: var(--m-content-primary);
  border: 1px solid var(--m-border-default);
  border-radius: var(--m-size-radius-md);
  padding: var(--m-size-space-2) var(--m-size-space-3);
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
button:hover  { border-color: var(--m-border-emphasis); }
button:active { background: var(--m-color-neutral-200); }
button[data-on="true"] {
  background: color-mix(in srgb, var(--m-interactive-primary) 18%, transparent);
  border-color: var(--m-interactive-primary);
  color: var(--m-interactive-primary);
}