/* =========================================================
   BASE RESET + TYPOGRAPHY (token-driven)
   Qui si aggancia tutto il sistema dei temi UI
   ========================================================= */

*{
  box-sizing: border-box;
}

html, body{
  height: 100%;
  width: 100%;
}

body{
  margin: 0;

  /* typography tokens */
  font-family: var(--fontFamily, system-ui);
  font-size: var(--fontSize, 14px);
  line-height: var(--lineHeight, 1.4);

  /* theme tokens */
  background: var(--bg);
  color: var(--text);

  /* rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* smooth theme morph */
  transition:
    background-color .25s ease,
    color .25s ease,
    font-size .25s ease,
    line-height .25s ease;
}

/* ----- helpers ----- */
.row{
  display: flex;
  align-items: center;
  gap: 8px;
}

.muted{
  opacity: .85;
}

.small{
  font-size: var(--fontSizeSmall, 12px);
}

/* ----- selection (theme aware) ----- */
::selection{
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
}

/* ----- focus reset: we use focusRing token on controls ----- */
:focus{
  outline: none;
}