/*
 * base.css: reset (Tailwind preflight equivalent), fonts, scrollbars, focus,
 * containers, helpers. Loaded after tokens.css on every page.
 */
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Arial");
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0%;
  size-adjust: 134.59%;
}

*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
* { scrollbar-color: #333 transparent; }
html {
  color-scheme: dark;
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: 700; }
small { font-size: 80%; }
code, kbd, samp, pre, .font-mono { font-family: var(--font-mono); }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, optgroup, select, textarea {
  font: inherit; font-feature-settings: inherit; letter-spacing: inherit; color: inherit;
  background: transparent; border-radius: 0;
}
button, [role="button"] { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
ol, ul, menu { list-style: none; }
table { border-collapse: collapse; text-indent: 0; border-color: inherit; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }
::-webkit-search-decoration, ::-webkit-search-cancel-button { -webkit-appearance: none; }

/* scrollbars (chrome.md 3.12) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4d4d4d; }
.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* focus: keyboard only, green ring (traded's blue ring becomes #2fbf73) */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* containers */
/* traded pads home and market sections (16 / 24 px) OUTSIDE a 1400 px content box, so content is
   1392 wide at 1440 (home.md 2.1): the max-width includes the padding */
.container, .container-wide {
  width: 100%; max-width: calc(var(--container-wide) + 32px); margin-inline: auto; padding-inline: 16px;
}
.container-7xl {
  width: 100%; max-width: var(--container-7xl); margin-inline: auto; padding-inline: 16px;
}
.container-6xl {
  width: 100%; max-width: var(--container-6xl); margin-inline: auto; padding-inline: 16px;
}
@media (min-width: 640px) {
  .container, .container-wide, .container-7xl, .container-6xl { padding-inline: 24px; }
  .container, .container-wide { max-width: calc(var(--container-wide) + 48px); }
}
@media (min-width: 1024px) {
  .container-7xl { padding-inline: 32px; }
}
.section { padding-block: 24px; }
@media (min-width: 640px) { .section { padding-block: 32px; } }

/* helpers */
.sr-only, .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.fg { color: var(--fg); }
.accent-text { color: var(--accent-bright); }
.nowrap { white-space: nowrap; }
.break-words { overflow-wrap: anywhere; }
.min-w-0 { min-width: 0; }
.link { color: var(--primary); text-underline-offset: 4px; }
.link:hover { text-decoration: underline; }
.page-main { min-height: calc(100dvh - var(--header-h)); background: var(--bg); }

/* shared keyframes */
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-plain { from { opacity: 0; } to { opacity: 1; } }
@keyframes cart-bounce {
  0% { opacity: 0; transform: scale(0.6); }
  45% { opacity: 1; transform: scale(1.25) rotate(-3deg); }
  75% { transform: scale(0.95) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes cart-item-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popper-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes popper-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }
@keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes modal-panel-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

.animate-fade-in { animation: fade-in var(--dur-fade) ease-out; }
.animate-pulse { animation: pulse 2s var(--ease-pulse) infinite; }
.animate-spin { animation: spin 1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-pulse { animation: none !important; }
}