/* Presentation pass per DESIGN.md. Tokens, radii, panels, tables, focus. No logic changes. */

:root {
  --sc-canvas: #f6f5f2;
  --sc-surface: #ffffff;
  --sc-elevated: #eeefed;
  --sc-border: #d5d9d8;
  --sc-ink: #182126;
  --sc-ink-2: #526167;
  --sc-accent: #244962;
  --sc-success: #24724d;
  --sc-warning: #8f5c18;
  --sc-danger: #a33838;
  --sc-font: Inter, "Segoe UI", system-ui, sans-serif;
  --sc-mono: "DM Mono", ui-monospace, monospace;
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sc-canvas: #121619;
    --sc-surface: #1b2023;
    --sc-elevated: #22292d;
    --sc-border: #394247;
    --sc-ink: #f0f2f2;
    --sc-ink-2: #b9c3c5;
    --sc-accent: #bfd0dd;
    --sc-success: #93c6a8;
    --sc-warning: #e2b46e;
    --sc-danger: #e59a96;
  }
}

:root[data-theme="dark"] {
  --sc-canvas: #121619;
  --sc-surface: #1b2023;
  --sc-elevated: #22292d;
  --sc-border: #394247;
  --sc-ink: #f0f2f2;
  --sc-ink-2: #b9c3c5;
  --sc-accent: #bfd0dd;
  --sc-success: #93c6a8;
  --sc-warning: #e2b46e;
  --sc-danger: #e59a96;
}

html body {
  background: var(--sc-canvas) !important;
  background-image: none !important;
  color: var(--sc-ink) !important;
  font-family: var(--sc-font) !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  font-style: normal !important;
}

html body h1,
html body h2,
html body h3 {
  font-family: var(--sc-font) !important;
  font-weight: 650 !important;
  color: var(--sc-ink) !important;
  text-wrap: balance;
}

html body h1 {
  font-size: clamp(28px, 4vw, 36px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
}

html body h2 {
  font-size: clamp(20px, 2.2vw, 24px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

html body h3 {
  font-size: 17px !important;
  line-height: 1.3 !important;
}

html body p,
html body li {
  text-wrap: pretty;
  color: var(--sc-ink-2);
}

html body .wallet,
html body .scroll-wallet-button {
  border-radius: 4px !important;
}

/* Header: one structural rule, no fill. */
html body .site-header {
  background: var(--sc-canvas) !important;
  border-bottom: 1px solid var(--sc-border);
}

html body .site-nav a {
  color: var(--sc-ink-2) !important;
}

html body .site-nav a.active {
  color: var(--sc-ink) !important;
  box-shadow: inset 0 -2px 0 var(--sc-accent);
}

html body .dashboard-summary,
html body .market-metrics {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--sc-border) !important;
  border-bottom: 1px solid var(--sc-border) !important;
  border-radius: 0 !important;
  padding: 20px 0 !important;
}

html body .dashboard-summary-card,
html body .market-metrics > * {
  border-left: none !important;
  box-shadow: none !important;
}

/* Tables: one header, restrained rows, right-aligned tabular figures. */
html body table {
  width: 100%;
  border-collapse: collapse;
}

html body table thead th {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--sc-ink-2) !important;
  text-transform: none;
  border-bottom: 1px solid var(--sc-border) !important;
  padding: 10px 12px !important;
}

html body table tbody td {
  border-bottom: 1px solid var(--sc-border) !important;
  padding: 12px !important;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink) !important;
}

html body table tbody tr:hover td {
  background: var(--sc-elevated) !important;
}

html body [class*="rate"],
html body [class*="apy"],
html body [class*="available"],
html body [class*="amount"],
html body [class*="balance"],
html body [class*="value"],
html body [class*="price"],
html body [class*="percent"] {
  font-variant-numeric: tabular-nums;
}

/* Primary action: the single strong accent per screen. */
html body .home-primary,
html body .home-calculator-action,
html body .wallet {
  background: var(--sc-accent) !important;
  color: var(--sc-canvas) !important;
}

html body .home-secondary,
html body .home-borrow-link,
html body .market-row-action,
html body .back-markets {
  color: var(--sc-accent) !important;
}

/* Risk text is never low contrast. */
html body .home-risk p,
html body .home-risk small,
html body .home-risk .note {
  color: var(--sc-ink) !important;
}

/* Visible focus everywhere. */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body [role="tab"]:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
}

@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;
  }
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}