/* ============================================================================
   WhaleLand unified typography
   Loaded after final-ui + terminal-redesign. Semantic sizes only; no page-local
   one-off px scales below the micro floor (11px).
   ========================================================================== */

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  /* Semantic type scale */
  --wl-type-page: 24px;
  --wl-type-section: 20px;
  --wl-type-card: 17px;
  --wl-type-body: 15px;
  --wl-type-control: 14px;
  --wl-type-help: 13px;
  --wl-type-meta: 12px;
  --wl-type-micro: 11px;

  --wl-fw-page: 700;
  --wl-fw-section: 700;
  --wl-fw-card: 600;
  --wl-fw-body: 500;
  --wl-fw-control: 600;
  --wl-fw-help: 400;
  --wl-fw-meta: 400;

  --wl-lh-page: 1.25;
  --wl-lh-section: 1.3;
  --wl-lh-body: 1.5;
  --wl-lh-help: 1.4;

  --wl-track-tight: -.01em;
  --wl-track-normal: 0;
  --wl-nums: tabular-nums;

  /* Legacy aliases → semantic scale (keeps older var() call sites consistent) */
  --wl-f-caption: var(--wl-type-micro);
  --wl-f-sm: var(--wl-type-meta);
  --wl-f-body: var(--wl-type-help);
  --wl-f-md: var(--wl-type-control);
  --wl-f-lg: var(--wl-type-body);
  --wl-f-title: var(--wl-type-card);
  --wl-f-display: var(--wl-type-section);
  --wl-f-hero: var(--wl-type-page);

  /* Control rhythm */
  --wl-btn-h: 44px;
  --wl-btn-h-sm: 36px;
  --wl-tag-pad-y: 3px;
  --wl-tag-pad-x: 8px;
  --wl-card-title-gap: 8px;

  /* Floating tabbar: 52px card; frosted fill lives on .mobile-tabbar-inner only */
  --wl-nav-h: 52px;
  --wl-nav-float-gap: 8px;
  --wl-nav-float-x: 10px;
  --wl-nav-glass: rgba(255, 255, 255, 0.85);
  --wl-nav-glass-border: rgba(12, 14, 16, 0.08);
  --wl-nav-glass-shadow: 0 4px 14px rgba(12, 14, 16, 0.06);
}

html[data-theme="dark"] {
  --wl-nav-glass: rgba(10, 14, 16, 0.85);
  --wl-nav-glass-border: rgba(255, 255, 255, 0.10);
  --wl-nav-glass-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* Mobile home / trade / discover: one step denser App type scale (tokens stay). */
@media (max-width: 1023px) {
  html[data-page="home"],
  html[data-page="swap"],
  html[data-page="discover"] {
    --wl-type-page: 20px;
    --wl-type-section: 17px;
    --wl-type-card: 15px;
    --wl-type-body: 13px;
    --wl-type-control: 12px;
    --wl-type-help: 12px;
    --wl-type-meta: 11px;
    --wl-fw-page: 600;
    --wl-fw-section: 600;
    --wl-fw-card: 600;
    --wl-fw-control: 600;
    --wl-btn-h: 40px;
    --wl-btn-h-sm: 32px;
    --wl-card-title-gap: 5px;
  }
}

/* Global numeric stability for market figures */
.wl-mrow-price,
.wl-mrow .wl-chg,
.wl-chg,
.wl-td-hero-price,
.wl-td-hero-chg,
.wl-final-pay-card input,
.wl-final-receive-card input,
#from-amount,
#to-amount,
.swap-token-input input,
[data-price],
.tabular-nums {
  font-variant-numeric: var(--wl-nums) !important;
}

/* -------------------------------------------------------------------------- */
/* Bottom navigation — 52px frosted floating card, identical on all five tabs */
/* -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .mobile-tabbar {
    height: var(--wl-nav-h) !important;
    right: var(--wl-nav-float-x, 10px) !important;
    bottom: calc(var(--wl-nav-float-gap, 8px) + env(safe-area-inset-bottom, 0px)) !important;
    left: var(--wl-nav-float-x, 10px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-tabbar .mobile-tabbar-inner {
    height: var(--wl-nav-h) !important;
    padding: 3px 4px !important;
    background: var(--wl-nav-glass) !important;
    border: 1px solid var(--wl-nav-glass-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--wl-nav-glass-shadow) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    opacity: 1 !important;
  }

  .mobile-tabbar .mobile-tab {
    gap: 2px !important;
    padding: 4px 2px 3px !important;
    color: var(--wl-text-3) !important;
    font-size: var(--wl-type-control) !important;
    font-weight: var(--wl-fw-control) !important;
    line-height: 1.15 !important;
    letter-spacing: var(--wl-track-normal) !important;
    opacity: 1 !important;
  }

  .mobile-tabbar .mobile-tab > .wl-icon,
  .mobile-tabbar .mobile-tab-launch-icon,
  .mobile-tabbar .mobile-tab-swap-icon {
    width: 28px !important;
    height: 20px !important;
    opacity: 1 !important;
  }

  .mobile-tabbar .mobile-tab > .wl-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .mobile-tabbar .mobile-tab-launch-icon .wl-icon,
  .mobile-tabbar .mobile-tab-swap-icon .wl-icon,
  .mobile-tab-swap-btn .wl-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .mobile-tabbar .mobile-tab > span:last-child {
    margin-top: 0 !important;
    font-size: var(--wl-type-control) !important;
    font-weight: var(--wl-fw-control) !important;
    line-height: 1.15 !important;
    opacity: 1 !important;
  }

  .mobile-tabbar .mobile-tab.active {
    color: var(--wl-brand) !important;
  }

  .mobile-tabbar .mobile-tab.active > .wl-icon,
  .mobile-tabbar .mobile-tab.active .mobile-tab-launch-icon,
  .mobile-tabbar .mobile-tab.active .mobile-tab-swap-icon {
    color: var(--wl-brand) !important;
    background: var(--wl-brand-tint, var(--wl-brand-soft)) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Markets list + category chrome                                             */
/* -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  html[data-page="markets"] .wl-mk-cat,
  html[data-page="markets"] .wl-mk-filter-btn,
  html[data-page="markets"] .wl-mk-cat-more {
    font-size: var(--wl-type-control) !important;
    font-weight: var(--wl-fw-control) !important;
    line-height: 1.2 !important;
    letter-spacing: var(--wl-track-normal) !important;
  }

  html[data-page="markets"] .wl-mk-sort,
  html[data-page="markets"] .wl-mk-sort button {
    font-size: var(--wl-type-meta) !important;
    font-weight: var(--wl-fw-meta) !important;
    line-height: var(--wl-lh-help) !important;
    color: var(--wl-text-3) !important;
  }

  html[data-page="markets"] .wl-mrow {
    min-height: 58px !important;
    --wl-mrow-h: 58px;
  }

  html[data-page="markets"] .wl-mrow-sym,
  html[data-page="markets"] .wl-mrow-pair b {
    font-size: var(--wl-type-body) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: var(--wl-track-tight) !important;
    max-width: 42vw !important;
  }

  html[data-page="markets"] .wl-mrow-price {
    font-size: var(--wl-type-body) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  html[data-page="markets"] .wl-mrow .wl-chg {
    font-size: var(--wl-type-control) !important;
    font-weight: var(--wl-fw-control) !important;
    line-height: 1 !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 6px !important;
  }

  html[data-page="markets"] .wl-mrow-l2,
  html[data-page="markets"] .wl-mrow-l2 b,
  html[data-page="markets"] .wl-mrow-tag,
  html[data-page="markets"] .wl-chain-tag,
  html[data-page="markets"] .wl-mrow-pair i,
  html[data-page="markets"] .wl-mrow-pair s {
    font-size: var(--wl-type-meta) !important;
    font-weight: var(--wl-fw-meta) !important;
    line-height: var(--wl-lh-help) !important;
    color: var(--wl-text-3) !important;
  }

  html[data-page="markets"] .wl-mrow-tag,
  html[data-page="markets"] .wl-chain-tag {
    padding: var(--wl-tag-pad-y) var(--wl-tag-pad-x) !important;
    font-weight: 500 !important;
  }

  .wl-sheet .wl-sheet-title,
  .wl-sheet-network .wl-sheet-title {
    font-size: var(--wl-type-card) !important;
    font-weight: var(--wl-fw-card) !important;
    line-height: var(--wl-lh-section) !important;
  }

  .wl-sheet-chip,
  .wl-mk-rank-grid .wl-sheet-chip {
    font-size: var(--wl-type-control) !important;
    font-weight: var(--wl-fw-control) !important;
    line-height: 1.2 !important;
    padding: 10px 12px !important;
  }

  .wl-sheet-chip small,
  .wl-sheet-toggle i {
    font-size: var(--wl-type-micro) !important;
    font-weight: var(--wl-fw-meta) !important;
    line-height: var(--wl-lh-help) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Home / Discover / Account titles                                           */
/* -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .wl-final-appbar-title,
  .wl-discover-final-title strong,
  .wl-account-design-appbar h1,
  .wl-appbar-title,
  html[data-page="discover"] .wl-discover-final-title strong {
    font-size: var(--wl-type-page) !important;
    font-weight: var(--wl-fw-page) !important;
    line-height: var(--wl-lh-page) !important;
    letter-spacing: var(--wl-track-tight) !important;
  }

  .wl-home-section-title b,
  .wl-final-section > .wl-home-section-title b,
  .wl-information-center .wl-section-header h2,
  .wl-final-section .wl-section-header h2,
  .MobileSectionHeader h2,
  [class*="wl-section"] h2,
  .wl-final-ecosystem-lead h2,
  .wl-account-design-team > header h2,
  .wl-discover-final-title span {
    font-size: var(--wl-type-section) !important;
    font-weight: var(--wl-fw-section) !important;
    line-height: var(--wl-lh-section) !important;
  }

  .wl-discover-final-title span {
    font-size: var(--wl-type-meta) !important;
    font-weight: var(--wl-fw-meta) !important;
    line-height: var(--wl-lh-help) !important;
    color: var(--wl-text-3) !important;
  }

  .wl-final-function b,
  .wl-final-quick-links b,
  .wl-information-zone-grid b,
  .wl-account-design-list b,
  .wl-hub-news-title,
  .wl-home-news-list b,
  .wl-news-item b,
  .wl-card > .wl-state-title,
  .wl-final-ecosystem-card h2 {
    font-size: var(--wl-type-card) !important;
    font-weight: var(--wl-fw-card) !important;
    line-height: var(--wl-lh-section) !important;
    margin-bottom: var(--wl-card-title-gap);
  }

  .wl-final-function small,
  .wl-final-function-copy small,
  .wl-information-zone-grid small,
  .wl-account-design-list small,
  .wl-hub-news-meta,
  .wl-home-news-list small,
  .wl-news-item small,
  .wl-final-ecosystem-lead p,
  .wl-state-desc,
  .wl-final-home-close p,
  .wl-discover-final-search input {
    font-size: var(--wl-type-help) !important;
    font-weight: var(--wl-fw-help) !important;
    line-height: var(--wl-lh-help) !important;
    color: var(--wl-text-2);
  }

  .wl-hub-news-meta,
  .wl-home-news-list time,
  .wl-news-item time,
  .wl-hub-news-source,
  .wl-final-ticker em,
  .wl-final-ticker small {
    font-size: var(--wl-type-meta) !important;
    font-weight: var(--wl-fw-meta) !important;
    line-height: var(--wl-lh-help) !important;
    color: var(--wl-text-3) !important;
  }

  .wl-btn,
  .wl-final-icon-button,
  .wl-chip,
  .wl-pill,
  .wl-lang-toggle,
  .mobile-account-control-slot .wl-lang-toggle {
    font-size: var(--wl-type-control) !important;
    font-weight: var(--wl-fw-control) !important;
    line-height: 1.2 !important;
  }

  .wl-btn {
    min-height: var(--wl-btn-h);
    height: auto;
    padding: 0 18px;
  }

  .wl-btn-sm {
    min-height: var(--wl-btn-h-sm);
    font-size: var(--wl-type-control) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Token detail                                                               */
/* -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  html.wl-token-detail-active .wl-td-idname b,
  html.wl-token-detail-active .wl-td-sym,
  #th-symbol {
    font-size: var(--wl-type-card) !important;
    font-weight: var(--wl-fw-card) !important;
    line-height: var(--wl-lh-section) !important;
  }

  html.wl-token-detail-active .wl-td-hero-price,
  #th-price {
    font-size: var(--wl-type-page) !important;
    font-weight: var(--wl-fw-page) !important;
    line-height: var(--wl-lh-page) !important;
    font-variant-numeric: var(--wl-nums) !important;
  }

  html.wl-token-detail-active .wl-td-hero-chg,
  html.wl-token-detail-active .wl-td-metrics b,
  html.wl-token-detail-active .wl-mkt-card b {
    font-size: var(--wl-type-body) !important;
    font-weight: 600 !important;
    font-variant-numeric: var(--wl-nums) !important;
  }

  html.wl-token-detail-active .wl-td-metrics i,
  html.wl-token-detail-active .wl-mkt-card i,
  html.wl-token-detail-active .wl-td-addr,
  html.wl-token-detail-active .wl-td-chain,
  html.wl-token-detail-active .wl-td-tabs button {
    font-size: var(--wl-type-meta) !important;
    font-weight: var(--wl-fw-control) !important;
    line-height: var(--wl-lh-help) !important;
  }

  html.wl-token-detail-active .wl-td-tabs button {
    font-size: var(--wl-type-control) !important;
  }

  html.wl-token-detail-active .wl-td-actions button,
  html.wl-token-detail-active .wl-td-actions a,
  html.wl-token-detail-active .wl-td-pos {
    font-size: var(--wl-type-control) !important;
    font-weight: var(--wl-fw-control) !important;
  }

  html.wl-token-detail-active .kline-tf,
  html.wl-token-detail-active .wl-td-tf-btn {
    font-size: var(--wl-type-control) !important;
    font-weight: var(--wl-fw-control) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Swap / Trade                                                               */
/* -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  html[data-page="swap"] .wl-appbar-title,
  html[data-page="swap"] .wl-final-swap-modebar b,
  html[data-page="swap"] .wl-final-swap-modebar button {
    font-size: var(--wl-type-control) !important;
    font-weight: var(--wl-fw-control) !important;
  }

  html[data-page="swap"] .wl-appbar-title {
    font-size: var(--wl-type-page) !important;
    font-weight: var(--wl-fw-page) !important;
    line-height: var(--wl-lh-page) !important;
  }

  html[data-page="swap"] .swap-token-input input,
  html[data-page="swap"] #from-amount,
  html[data-page="swap"] #to-amount,
  html[data-page="swap"] .wl-final-pay-card input,
  html[data-page="swap"] .wl-final-receive-card input {
    font-size: var(--wl-type-page) !important;
    font-weight: 600 !important;
    line-height: var(--wl-lh-page) !important;
    font-variant-numeric: var(--wl-nums) !important;
  }

  html[data-page="swap"] .token-select-btn,
  html[data-page="swap"] .wl-final-token-btn,
  html[data-page="swap"] .token-symbol {
    font-size: var(--wl-type-body) !important;
    font-weight: 600 !important;
  }

  html[data-page="swap"] .balance-row,
  html[data-page="swap"] .wl-final-wallet-row,
  html[data-page="swap"] .fee-row,
  html[data-page="swap"] .wl-final-fee-details,
  html[data-page="swap"] .wl-final-fee-details dd,
  html[data-page="swap"] .wl-final-fee-details dt {
    font-size: var(--wl-type-meta) !important;
    font-weight: var(--wl-fw-meta) !important;
    line-height: var(--wl-lh-help) !important;
    color: var(--wl-text-3);
  }

  html[data-page="swap"] #swap-btn,
  html[data-page="swap"] .wl-btn-primary,
  html[data-page="swap"] .swap-action-btn {
    font-size: var(--wl-type-control) !important;
    font-weight: var(--wl-fw-control) !important;
    min-height: var(--wl-btn-h);
  }
}

/* -------------------------------------------------------------------------- */
/* Desktop shell — same semantic ladder, slightly roomier                     */
/* -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .navbar .nav-link,
  .btn,
  button.btn {
    font-size: var(--wl-type-control);
    font-weight: var(--wl-fw-control);
  }

  h1, .page-title {
    font-size: var(--wl-type-page);
    font-weight: var(--wl-fw-page);
    line-height: var(--wl-lh-page);
  }

  h2, .section-title {
    font-size: var(--wl-type-section);
    font-weight: var(--wl-fw-section);
    line-height: var(--wl-lh-section);
  }

  h3, .card-title {
    font-size: var(--wl-type-card);
    font-weight: var(--wl-fw-card);
    line-height: var(--wl-lh-section);
  }

  body, .data-table, .card {
    font-size: var(--wl-type-body);
    font-weight: var(--wl-fw-body);
    line-height: var(--wl-lh-body);
  }

  .text-muted, .meta, .hint, .subtitle {
    font-size: var(--wl-type-help);
    font-weight: var(--wl-fw-help);
    line-height: var(--wl-lh-help);
  }

  .data-table .price,
  .data-table .chg,
  .col-price,
  .col-24h {
    font-variant-numeric: var(--wl-nums);
  }
}

/* Soft clamp: never render below micro floor in wl surfaces */
html, body, #root, .page-root, .wl-final-main,
.wl-market-page,
.account-page,
.detect-page,
.swap-page-root,
.wl-td-on {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
}
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------------- */
/* Wallet DApp WebView: lower weight first, then tiny size/line-height trim.
   Only when body has .wallet-webview / .wd-inapp-webview (common.js).
   Ordinary Safari/Chrome keep the normal mobile scale above. */
/* -------------------------------------------------------------------------- */
body.wallet-webview,
body.wd-inapp-webview {
  --wl-fw-page: 700;
  --wl-fw-section: 600;
  --wl-fw-card: 600;
  --wl-fw-body: 400;
  --wl-fw-control: 500;
  --wl-fw-help: 400;
  --wl-fw-meta: 400;
  --wl-lh-page: 1.22;
  --wl-lh-section: 1.28;
  --wl-lh-body: 1.42;
  --wl-lh-help: 1.35;
}

@media (max-width: 1023px) {
  body.wallet-webview,
  body.wd-inapp-webview {
    --wl-type-page: 19px;
    --wl-type-section: 16px;
    --wl-type-card: 14px;
    --wl-type-body: 13px;
    --wl-type-control: 12px;
    --wl-type-help: 11px;
    --wl-type-meta: 11px;
    --wl-fw-page: 700;
    --wl-fw-section: 600;
    --wl-fw-card: 600;
    --wl-fw-body: 400;
    --wl-fw-control: 500;
  }

  body.wallet-webview .wl-final-section-title,
  body.wallet-webview .wl-final-function b,
  body.wallet-webview .wl-final-function strong,
  body.wallet-webview .wl-home-news-list b,
  body.wallet-webview .wl-home-news-list a,
  body.wallet-webview .wl-discover-final-title,
  body.wallet-webview .wl-information-zone-grid b,
  body.wallet-webview .wl-account-design-list b,
  body.wallet-webview .wl-account-design-appbar h1,
  body.wallet-webview .wl-final-swap-mode-tabs button,
  body.wd-inapp-webview .wl-final-section-title,
  body.wd-inapp-webview .wl-final-function b,
  body.wd-inapp-webview .wl-final-function strong,
  body.wd-inapp-webview .wl-home-news-list b,
  body.wd-inapp-webview .wl-home-news-list a,
  body.wd-inapp-webview .wl-discover-final-title,
  body.wd-inapp-webview .wl-information-zone-grid b,
  body.wd-inapp-webview .wl-account-design-list b,
  body.wd-inapp-webview .wl-account-design-appbar h1,
  body.wd-inapp-webview .wl-final-swap-mode-tabs button {
    font-weight: 600 !important;
  }

  body.wallet-webview .mobile-tabbar-item.is-active span,
  body.wd-inapp-webview .mobile-tabbar-item.is-active span {
    font-weight: 600 !important;
  }

  body.wallet-webview .mobile-tabbar-item span,
  body.wd-inapp-webview .mobile-tabbar-item span {
    font-weight: 500 !important;
  }

  body.wallet-webview b,
  body.wallet-webview strong,
  body.wd-inapp-webview b,
  body.wd-inapp-webview strong {
    font-weight: 600;
  }

  /* Cap accidental 800/900 title weights inside wallet WebViews only */
  body.wallet-webview .wl-final-main,
  body.wallet-webview .account-page,
  body.wallet-webview .wl-td-on,
  body.wd-inapp-webview .wl-final-main,
  body.wd-inapp-webview .account-page,
  body.wd-inapp-webview .wl-td-on {
    font-weight: 400;
  }
}

/* Account page (all mobile browsers): lighter titles, theme gray tokens */
@media (max-width: 1023px) {
  html[data-page="account"] .wl-account-design-appbar h1 {
    font-weight: 600 !important;
    color: var(--wl-text) !important;
  }

  html[data-page="account"] .wl-account-design-list b,
  html[data-page="account"] .wl-account-design-team > header h2,
  html[data-page="account"] .wl-account-design-assets > header > span {
    font-weight: 600 !important;
    color: var(--wl-text) !important;
  }

  html[data-page="account"] .wl-account-design-list small,
  html[data-page="account"] .wl-account-design-total small,
  html[data-page="account"] .wl-account-design-state,
  html[data-page="account"] #wl-design-assets-hint {
    color: var(--wl-text-3) !important;
    font-weight: 400 !important;
  }

  html[data-page="account"] .wl-account-design-total strong {
    font-weight: 700 !important;
  }

  html[data-page="account"] .wl-account-design-identity code {
    font-weight: 600 !important;
  }
}

/* Lift legacy sub-11px labels in final-ui without flattening hierarchy */
@media (max-width: 1023px) {
  .wl-final-appbar small,
  .wl-final-function em,
  .wl-final-quick-links em,
  .wl-discover-final-title span,
  .wl-final-ticker small,
  .wl-home-news-list .wl-pill,
  .wl-information-zone-grid small,
  .wl-account-design-footer,
  .wl-mk-sort,
  .wl-mk-sort button {
    font-size: max(11px, 1em);
  }

  .wl-final-appbar small,
  .wl-discover-final-title span,
  .wl-final-ticker small,
  .wl-account-design-footer {
    font-size: var(--wl-type-meta) !important;
    font-weight: var(--wl-fw-meta) !important;
    line-height: var(--wl-lh-help) !important;
  }
}