@use "tokens" as *;
// =========================================================
// Reset + base
// =========================================================

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

html {
  font-size: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: $k-font-sans;
  font-size: $fs-14;
  line-height: $k-lh-body;
  color: $text-1;
  background-color: $bg;
  overflow-x: hidden;
  max-width: 100vw;
  min-height: 100vh;
}

#app { min-height: 100vh; max-width: 100%; }

h1, h2, h3, h4 { font-weight: $k-fw-semibold; line-height: $k-lh-tight; }
h1 { font-size: $fs-28; }
h2 { font-size: $fs-24; }
h3 { font-size: $fs-20; }

a { color: $accent-500; text-decoration: none; &:hover { color: $accent-600; } }

// Todo lo clickable señala que lo es; los estados deshabilitados lo revierten
// (cada componente pone su not-allowed si toca).
button:not(:disabled),
[role='button']:not([aria-disabled='true']),
select:not(:disabled),
summary,
input[type='checkbox']:not(:disabled),
input[type='radio']:not(:disabled),
input[type='submit']:not(:disabled),
input[type='file']:not(:disabled) {
  cursor: pointer;
}

// Iconos del juego insertados por el wysiwyg (img.rt-icon): SIEMPRE al
// tamaño del texto que los rodea (1.2x), se rendericen donde se rendericen
// (con o sin .rich-content alrededor).
img.rt-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.24em;
  margin: 0 1px;
}