/* Zeltis base components — reference styles shared by the site, the app and the admin.
   Needs fonts/fonts.css and tokens.css. No gradients, pill buttons, 2 px violet focus ring. */

.z-display, .z-h1, .z-h2, .z-h3 {
  font-family: var(--z-font-display);
  letter-spacing: var(--z-track-display);
  margin: 0;
  text-wrap: balance;
}
.z-display { font-size: var(--z-fs-display); line-height: var(--z-lh-display); font-weight: var(--z-weight-bold); }
.z-h1 { font-size: var(--z-fs-h1); line-height: var(--z-lh-heading); font-weight: var(--z-weight-bold); }
.z-h2 { font-size: var(--z-fs-h2); line-height: var(--z-lh-heading); font-weight: var(--z-weight-semibold); }
.z-h3 { font-size: var(--z-fs-h3); line-height: var(--z-lh-tight); font-weight: var(--z-weight-semibold); letter-spacing: -0.01em; }
.z-lead { font-size: var(--z-fs-lead); line-height: 1.5; color: var(--z-fg-muted); margin: 0; }
.z-small { font-size: var(--z-fs-small); line-height: 1.45; }
.z-caption { font-size: var(--z-fs-caption); line-height: 1.35; color: var(--z-fg-muted); }
.z-label {
  font-size: var(--z-fs-caption); font-weight: var(--z-weight-semibold);
  letter-spacing: var(--z-track-caps); text-transform: uppercase; color: var(--z-fg-muted);
}
.z-number {
  font-family: var(--z-font-display); font-weight: var(--z-weight-semibold);
  font-size: var(--z-fs-number); line-height: 1.1; letter-spacing: var(--z-track-display);
  font-variant-numeric: tabular-nums;
}
.z-tabular { font-variant-numeric: tabular-nums; }
.z-mono { font-family: var(--z-font-mono); font-size: 0.9375em; overflow-wrap: anywhere; }

/* Focus: the same ring everywhere */
.z-btn:focus-visible, .z-input:focus-visible, .z-link:focus-visible, .z-check input:focus-visible {
  outline: var(--z-focus-ring);
  outline-offset: var(--z-focus-offset);
}

/* Links */
.z-link { color: var(--z-link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; border-radius: 4px; }
.z-link:hover { text-decoration-thickness: 2.5px; }

/* Buttons */
.z-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--z-space-2);
  min-height: var(--z-control-h); padding: 0 var(--z-space-6);
  border: 2px solid transparent; border-radius: var(--z-radius-pill);
  font-family: var(--z-font-ui); font-size: var(--z-fs-body); font-weight: var(--z-weight-semibold); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--z-dur) var(--z-ease), border-color var(--z-dur) var(--z-ease), transform var(--z-dur-fast) var(--z-ease);
}
.z-btn:active { transform: scale(0.98); }
.z-btn--primary { background: var(--z-gold); color: var(--z-ink); }
.z-btn--primary:hover { background: var(--z-gold-deep); }
.z-btn--secondary { background: transparent; color: var(--z-fg); border-color: var(--z-border-control); }
.z-btn--secondary:hover { border-color: var(--z-fg); }
.z-btn--violet { background: var(--z-violet); color: var(--z-paper); }
.z-btn--violet:hover { background: var(--z-violet-deep); }
.z-btn--ghost { background: transparent; color: var(--z-link); padding: 0 var(--z-space-4); }
.z-btn--ghost:hover { background: var(--z-violet-soft); }
.z-btn--danger { background: transparent; color: var(--z-negative); border-color: var(--z-negative); }
.z-btn--danger:hover { background: var(--z-coral-soft); }
.z-btn--sm { min-height: var(--z-control-h-sm); padding: 0 var(--z-space-4); font-size: var(--z-fs-small); }
.z-btn--block { display: flex; width: 100%; }
.z-btn[disabled], .z-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Form fields */
.z-field { display: grid; gap: var(--z-space-2); }
.z-field > label { font-size: var(--z-fs-small); font-weight: var(--z-weight-medium); color: var(--z-fg); }
.z-input {
  width: 100%; min-height: var(--z-control-h); padding: 0 var(--z-space-4);
  background: var(--z-surface); color: var(--z-fg);
  border: 1.5px solid var(--z-border-control); border-radius: var(--z-radius-md);
  font-family: var(--z-font-ui); font-size: var(--z-fs-body);
  transition: border-color var(--z-dur) var(--z-ease);
}
.z-input::placeholder { color: var(--z-fg-muted); opacity: 1; }
.z-input:hover { border-color: var(--z-fg-muted); }
.z-input[aria-invalid="true"] { border-color: var(--z-negative); }
.z-input[disabled] { opacity: 0.5; cursor: not-allowed; }
.z-hint { font-size: var(--z-fs-small); color: var(--z-fg-muted); margin: 0; }
.z-error { font-size: var(--z-fs-small); color: var(--z-negative); margin: 0; }
.z-check { display: flex; gap: var(--z-space-3); align-items: flex-start; font-size: var(--z-fs-small); line-height: 1.45; color: var(--z-fg-muted); }
.z-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--z-violet); }

/* Surfaces */
.z-card {
  background: var(--z-surface); border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg); padding: var(--z-space-6);
}
.z-card--raised { background: var(--z-surface-raised); box-shadow: var(--z-shadow-2); }

/* Badges and status */
.z-badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px;
  border-radius: var(--z-radius-pill); font-size: var(--z-fs-caption); font-weight: var(--z-weight-semibold);
  background: var(--z-surface-raised); color: var(--z-fg); border: 1px solid var(--z-border);
}
.z-badge--gold { background: var(--z-gold-soft); color: var(--z-gold); border-color: transparent; }
.z-badge--violet { background: var(--z-violet-soft); color: var(--z-lilac); border-color: transparent; }
.z-badge--positive { background: var(--z-mint-soft); color: var(--z-mint); border-color: transparent; }
.z-badge--negative { background: var(--z-coral-soft); color: var(--z-coral); border-color: transparent; }
.z-light .z-badge--gold { background: var(--z-gold); color: var(--z-ink); }
/* On light sections the fill is paper with a tinted border: a tinted fill drops the text below 4.5:1. */
.z-light .z-badge--violet { background: var(--z-paper); border-color: rgba(107, 78, 255, 0.4); color: var(--z-violet); }
.z-light .z-badge--positive { background: var(--z-paper); border-color: rgba(11, 122, 91, 0.4); color: var(--z-mint-deep); }
.z-light .z-badge--negative { background: var(--z-paper); border-color: rgba(200, 50, 58, 0.4); color: var(--z-coral-deep); }

/* Persistent marker required on every demo screen (brief, section 2, rule 3) */
.z-demo-marker {
  display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 12px;
  border-radius: var(--z-radius-pill); border: 1.5px dashed var(--z-gold);
  color: var(--z-gold); background: var(--z-gold-soft);
  font-size: var(--z-fs-caption); font-weight: var(--z-weight-semibold); letter-spacing: 0.02em;
}
.z-light .z-demo-marker { color: var(--z-ink); border-color: var(--z-ink); background: var(--z-gold); }

/* Amounts */
.z-amount--in { color: var(--z-positive); font-variant-numeric: tabular-nums; }
.z-amount--out { color: var(--z-fg); font-variant-numeric: tabular-nums; }

.z-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}