/* ==========================================================================
   Global Precious Metals App Directory — Shared Design System (base.css)
   Global foundation: variables / reset / utility classes / containers / common buttons / section titles.
   Header (Ticker + Nav) and Footer styles live in components.css.
   Breakpoints: desktop 1081-1920, mobile <1080.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

:root {
  /* Brand / accent colors */
  --orange: #ff7401;
  --orange-soft: #fc862c;

  /* Backgrounds */
  --bg-page: #f5f5f5;
  --bg-white: #ffffff;
  --bg-soft: #fafafa;
  --bg-tag: #f7f7f7;
  --dark-1: #161616;   /* dark section base */
  --dark-2: #090909;   /* nav */
  --dark-3: #262626;   /* ticker bar */
  --dark-4: #090909;

  /* Text */
  --t-900: #222222;
  --t-800: #333333;
  --t-700: #3a3a3a;
  --t-600: #666666;
  --t-500: #7c7c7c;
  --t-400: #999999;
  --t-300: #aaaaaa;
  --t-200: #b0b0b0;
  --t-light: #dedede;
  --t-lighter: #efefef;

  /* Status colors */
  --up: #2fb62d;
  --down: #f81d1d;
  --up-light: #7ad584;
  --down-light: #f48785;
  --rank-1: #eb0000;
  --rank-2: #fc862c;
  --rank-3: #ffd400;
  --rank-x: #7d7d7d;

  /* Borders */
  --line-1: #ededed;
  --line-2: #dbdbdb;
  --line-3: #f3f4f6;
  --line-4: #8c8c8c;

  /* Radius / shadow */
  --r-card: 24px;
  --r-sm: 12px;
  --r-pill: 60px;
  --shadow-card: 0px 1px 10px 4px rgba(0, 0, 0, 0.05);

  /* Font stacks */
  --font-sc: 'HarmonyOS Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  --font-mi: 'MiSans', 'Noto Sans SC', 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-inter: 'Inter', var(--font-sc);

  /* Layout widths */
  --content: 1200px;
  --wide: 1400px;
}

/* ----------------------------- reset ----------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x:clip on the root clips all horizontal overflow (including off-screen
   position:fixed menus), without creating a scroll container and without affecting
   vertical scrolling or the sticky header — the root fix for the mobile horizontal-pan menu leak */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-sc);
  background: var(--bg-page);
  color: var(--t-900);
  line-height: 1.4;
  font-weight: 400;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; }

/* ----------------------------- Containers ----------------------------- */
.container { width: min(var(--content), 100% - 48px); margin-inline: auto; }

/* ----------------------------- Common buttons / tags ----------------------------- */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mi); border-radius: var(--r-pill);
  white-space: nowrap; transition: all .18s ease;
}
.btn-outline {
  border: 1px solid var(--orange); color: var(--orange);
  background: transparent;
}
.btn-outline:hover { background: var(--orange); color: #fff; }
.btn-solid { background: var(--orange); color: #fff; }
.btn-solid:hover { filter: brightness(1.06); }

/* Download button (inside cards) */
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--orange); color: var(--orange);
  border-radius: var(--r-pill); font-family: var(--font-mi);
  padding: 10px 16px; font-size: 20px; white-space: nowrap;
  transition: all .18s ease;
}
.dl-btn:hover { background: var(--orange); color: #fff; }

/* Mobile "view more" button (hidden on desktop) */
.mobile-more { display: none; }

/* Section title */
.section-title {
  font-weight: 900; font-size: 36px; color: var(--t-900);
  line-height: 1.2; letter-spacing: .5px;
}
.section-link {
  font-size: 20px; color: var(--orange); font-weight: 400;
  white-space: nowrap; transition: opacity .15s;
}
.section-link:hover { opacity: .75; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
}

/* ==========================================================================
   Responsive — mobile (<1080) global section (header/footer responsive rules in components.css)
   ========================================================================== */
@media (max-width: 1080px) {
  html,
  body {
    scrollbar-width: none;
  }

  body::-webkit-scrollbar {
    display: none;
  }

  .container {
    width: calc(100% - 30px);
  }

  .section-title { font-size: clamp(22px, 5.19vw, 56px); line-height: 1.18; }
  .section-link { font-size: 14px; }
}