@import url('./dibana-tokens.css');

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--dibana-bg);
  color: var(--dibana-text);
  font-family: var(--dibana-font-ui);
  font-size: var(--dibana-body-size);
  line-height: var(--dibana-body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.dibana-display { font-size: var(--dibana-display-size); line-height: var(--dibana-display-line); font-weight: 700; letter-spacing: -.02em; }
.dibana-h1 { font-size: var(--dibana-h1-size); line-height: var(--dibana-h1-line); font-weight: 700; letter-spacing: -.015em; }
.dibana-h2 { font-size: var(--dibana-h2-size); line-height: var(--dibana-h2-line); font-weight: 700; }
.dibana-h3 { font-size: var(--dibana-h3-size); line-height: var(--dibana-h3-line); font-weight: 600; }
.dibana-body { font-size: var(--dibana-body-size); line-height: var(--dibana-body-line); }
.dibana-caption { font-size: var(--dibana-caption-size); line-height: var(--dibana-caption-line); color: var(--dibana-muted); }

:focus-visible {
  outline: 3px solid rgba(98,70,234,.22);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  :root {
    --dibana-display-size: 28px;
    --dibana-display-line: 36px;
    --dibana-h1-size: 24px;
    --dibana-h1-line: 30px;
    --dibana-h2-size: 20px;
    --dibana-h2-line: 26px;
  }
}