/* base.css — reset, tipografie și controale de bază. Folosește doar variabile din tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { max-width: 100%; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: .01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0; }
a { color: var(--color-accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
[hidden] { display: none !important; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--color-fg-muted); }
.faint { color: var(--color-fg-faint); }
.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- butoane: toate au cel puțin --tap-min înălțime ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn.danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.success { background: var(--color-success); border-color: var(--color-success); color: var(--color-surface); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (hover: hover) {
  .btn:hover { background: var(--color-surface-sunk); }
  .btn.primary:hover { background: var(--color-accent-strong); }
  .btn.ghost:hover { background: var(--color-surface-sunk); }
}

.icon-btn {
  display: inline-grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--color-fg-muted);
  cursor: pointer; touch-action: manipulation; flex: none;
}
.icon-btn:active { background: var(--color-surface-sunk); }
@media (hover: hover) { .icon-btn:hover { background: var(--color-surface-sunk); color: var(--color-fg); } }

.ic { width: 22px; height: 22px; flex: none; display: block; }
.ic path, .ic circle, .ic rect, .ic line, .ic polyline, .ic polygon {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- câmpuri ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field > span { font-size: var(--text-sm); color: var(--color-fg-muted); font-weight: var(--weight-medium); }
.input, select.input, textarea.input {
  min-height: var(--tap-min);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: max(16px, var(--text-md)); /* sub 16px, iPhone mărește pagina la atingere */
}
textarea.input { min-height: calc(var(--tap-min) * 2); resize: vertical; line-height: var(--leading-body); }

/* ---------- segmente (alegere dintre câteva opțiuni) ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); background: var(--color-surface-sunk); border-radius: var(--radius-md); }
.seg button {
  min-height: calc(var(--tap-min) - 8px);
  padding: 0 var(--space-3);
  border: 0; border-radius: calc(var(--radius-md) - 2px);
  background: transparent; color: var(--color-fg-muted);
  font-weight: var(--weight-medium); cursor: pointer; touch-action: manipulation;
}
.seg button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-fg); box-shadow: var(--shadow-1); }

/* ---------- etichete ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunk); color: var(--color-fg-muted);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  line-height: 1.6; white-space: nowrap;
}
.chip.ref { font-family: var(--font-mono); font-weight: var(--weight-regular); background: transparent; border: var(--border-width) solid var(--color-line-strong); color: var(--color-fg); }
.chip.cond { background: transparent; border: var(--border-width) dashed var(--color-line-strong); font-style: italic; white-space: normal; }
.chip.unit { background: var(--unit-soft, var(--unit-default-soft)); color: var(--unit-fg, var(--unit-default)); }
.chip.warn { background: var(--color-warning-soft); color: var(--color-warning); }
.chip.danger { background: var(--color-danger-soft); color: var(--color-danger); }
.chip.ok { background: var(--color-success-soft); color: var(--color-success); }
.chip.accent { background: var(--color-accent-soft); color: var(--color-accent); }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }