/* ============================================================
   Reset + base body + typography + focus ring.
   Depends on tokens.css.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-ui);
  font-size: var(--ts-body);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button { cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
}

a:hover { color: var(--text-primary); }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  color: var(--text-heading);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--ts-h1); font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; }
h2 { font-size: var(--ts-h2); font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; }
h3 { font-size: var(--ts-h3); }
h4 { font-size: var(--ts-h4); }
h5 { font-size: var(--ts-h5); }
h6 { font-size: var(--ts-h6); }

p { color: var(--text-body); }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

hr {
  border: 0;
  height: 1px;
  background: var(--border-base);
  margin: var(--space-5) 0;
}

::selection {
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* Focus ring — R10. :focus-visible only, no outline on mouse. */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent);
  border-radius: var(--radius-base);
}

/* Tabular numerals on numeric content (R27). */
.tabular { font-variant-numeric: tabular-nums; }

/* Helpers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.muted   { color: var(--text-muted); }
.dimmed  { color: var(--text-dimmed); }
.heading { color: var(--text-heading); }

/* Skeletons (loading placeholders). */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--bg-hover) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s var(--ease-linear) infinite;
  border-radius: var(--radius-md);
}

/* Scrollbar — minimal, theme-aware. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* Mobile: input font-size 16px to prevent iOS auto-zoom (MR12). */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px;
  }
}