/* ============================================================================
   Crypto.ssr — Base: reset, typography, shared primitives
   ========================================================================== */

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

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    min-height: 100dvh;
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; }

/* Numbers that change get tabular figures everywhere */
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Market semantics */
.up   { color: var(--up); }
.down { color: var(--down); }

/* Focus — visible, on-brand, keyboard only */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brand-weak); }

/* Scrollbars — quiet */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Shared primitives ------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    height: 44px; padding: 0 var(--sp-5);
    border-radius: var(--r-sm);
    font-weight: 600; font-size: var(--fs-body);
    background: var(--surface-2); color: var(--text);
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
    white-space: nowrap; user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--brand { background: var(--brand); color: var(--brand-ink); }
.btn--brand:hover { background: var(--brand-strong); }
.btn--dark  { background: var(--text); color: var(--bg); }
.btn--up    { background: var(--up); color: #fff; }
.btn--down  { background: var(--down); color: #fff; }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--block { width: 100%; }
.btn--lg { height: 52px; font-size: var(--fs-h4); }
.btn--sm { height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-small); }
.btn--pill { border-radius: var(--r-pill); }

.card {
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.chip {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    height: 26px; padding: 0 var(--sp-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-caption); font-weight: 600;
    background: var(--surface-2); color: var(--text-2);
}
.chip--up   { background: var(--up-weak); color: var(--up); }
.chip--down { background: var(--down-weak); color: var(--down); }
.chip--gold { background: var(--gold-weak); color: var(--gold); }
.chip--brand{ background: var(--brand-weak); color: var(--brand); }

.field {
    width: 100%; height: 48px; padding: 0 var(--sp-4);
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--text);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.field::placeholder { color: var(--text-muted); }
.field:focus { outline: none; border-color: var(--brand); background: var(--surface); }

.eyebrow {
    font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-3);
}

.muted { color: var(--text-3); }
.faint { color: var(--text-muted); }

/* Section rhythm */
.stack > * + * { margin-top: var(--sp-4); }
.divider { height: 1px; background: var(--border); border: 0; }

/* Loading spinner */
.spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--border-strong); border-top-color: var(--brand);
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-inset) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--r-xs);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Price tick flash (signature: live price pulses on change) */
@keyframes flash-up   { 0% { color: var(--up); }   100% { color: inherit; } }
@keyframes flash-down { 0% { color: var(--down); } 100% { color: inherit; } }
.tick-up   { animation: flash-up   var(--dur-slow) var(--ease-out); }
.tick-down { animation: flash-down var(--dur-slow) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}