/* BNC Classic (BNCS · BNC经典) · design tokens — Binance-yellow (reskin-theme, 2026-10-03).
 * Exchange-dark surfaces (#0B0E11 page, #181A20 / #1E2329 / #2B3139), one brand yellow (#F0B90B) and a button yellow
 * (#FCD535) carrying black ink, white/grey text, green up / red down. Archivo (heavy, slightly expanded) for headlines and big
 * figures, IBM Plex Sans for UI, tabular figures everywhere. Dark only.
 * The --gold* names are kept as aliases of the yellow: js/ui draws SVG with fill="var(--gold)". */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg-0: #07090C;   /* ticker, footer base (deepest) */
  --bg:   #0B0E11;   /* page */
  --bg-1: #181A20;   /* panel */
  --bg-2: #1E2329;   /* raised: panel head, menus, dialogs, table hover */
  --bg-3: #2B3139;   /* inputs, chips, secondary buttons */
  --bg-4: #363C45;   /* pressed / hover of --bg-3 */
  --glass: rgba(24, 26, 32, .74);

  /* lines */
  --line:   #22262D;  /* hairline inside panels */
  --line-2: #2B3139;  /* panel borders */
  --line-3: #474D57;  /* input borders, strong */

  /* text */
  --text:   #EAECEF;  /* primary */
  --text-2: #B7BDC6;  /* secondary */
  --text-3: #848E9C;  /* labels / meta (≥ 4.5:1 on --bg-1) */
  --text-4: #5E6673;  /* disabled & decorative only, never data */

  /* brand yellow */
  --y:      #F0B90B;  /* brand */
  --y-btn:  #FCD535;  /* button face */
  --y-hi:   #FFE27A;  /* highlight, gradient top */
  --y-lo:   #C99400;  /* gradient bottom, pressed */
  --y-ink:  #0B0E11;  /* text on yellow */
  --y-a06:  rgba(240, 185, 11, .06);
  --y-a10:  rgba(240, 185, 11, .10);
  --y-a16:  rgba(240, 185, 11, .16);
  --y-a24:  rgba(240, 185, 11, .24);
  --y-a40:  rgba(240, 185, 11, .40);
  --y-grad:   linear-gradient(180deg, #FFE27A 0%, #FCD535 32%, #F0B90B 68%, #D9A200 100%);
  --y-grad-x: linear-gradient(90deg, #E9A800 0%, #F0B90B 30%, #FCD535 70%, #FFE27A 100%);
  --y-text:   linear-gradient(180deg, #FFF1B8 0%, #FCD535 38%, #F0B90B 72%, #E0A100 100%);
  --glow-sm: 0 0 12px rgba(240, 185, 11, .35);
  --glow:    0 0 28px rgba(240, 185, 11, .30);
  --glow-lg: 0 0 60px rgba(240, 185, 11, .28);
  --tglow:   0 0 18px rgba(240, 185, 11, .45);   /* text-shadow for glowing figures */

  /* legacy aliases (js/ui inline SVG + shared rules) */
  --gold:     var(--y);
  --gold-hi:  var(--y-btn);
  --gold-lo:  var(--y-lo);
  --gold-ink: var(--y-ink);
  --gold-a06: var(--y-a06);
  --gold-a12: var(--y-a10);
  --gold-a24: var(--y-a24);
  --gold-a40: var(--y-a40);

  /* semantic — price change & P&L only (swapped by [data-updown="red"]) */
  --up:   #0ECB81;  --up-a12:   rgba(14, 203, 129, .12);
  --down: #F6465D;  --down-a12: rgba(246, 70, 93, .12);
  --warn: #F6465D;  /* validation (never swapped) */

  /* type — web fonts in css/fonts.css (self-hosted); each "… Fallback" is a local face scaled toward the web font */
  --f-display: "Archivo", "BNCS Display SC", "Archivo Fallback", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-sans:    "IBM Plex Sans", "Plex Sans Fallback", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-num:     "IBM Plex Sans", "Plex Sans Fallback", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-code:    "IBM Plex Mono", "Plex Mono Fallback", "Plex Mono Fallback 2", "Noto Sans SC", ui-monospace, Menlo, Consolas, monospace;
  --f-mono:    var(--f-num);   /* legacy name: figures */
  --f-lat:     var(--f-display);
  --f-serif:   var(--f-display);
  --wd: 112%;                  /* Archivo width for display */

  /* scale (px, never half pixels, never below 11) */
  --t-display-1: 76px;
  --t-flip: 64px;
  --t-display-2: 40px;
  --t-editorial: 32px;
  --t-figure-xl: 28px;
  --t-figure-l: 22px;
  --t-title: 16px;
  --t-body: 14px;
  --t-data: 13px;
  --t-caption: 12px;
  --t-overline: 11px;

  /* space (base 4) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s24: 96px;

  /* frame */
  --wrap: 1360px;
  --gut: 40px;
  --gap: 16px;
  --r-s: 4px;
  --r: 8px;
  --r-l: 12px;
  --r-xl: 16px;
  --head-h: 64px;
  --ticker-h: 34px;
  --tabbar-h: 0px;
  --sec-gap: 96px;
  --shadow-pop: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .03);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 18px 40px -28px rgba(0, 0, 0, .9);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* 红涨绿跌 (settings): only --up / --down swap */
:root[data-updown="red"] {
  --up:   #F6465D;  --up-a12:   rgba(246, 70, 93, .12);
  --down: #0ECB81;  --down-a12: rgba(14, 203, 129, .12);
}

@media (max-width: 760px) {
  :root {
    --t-display-1: 42px;
    --t-flip: 40px;
    --t-display-2: 30px;
    --t-editorial: 26px;
    --t-figure-xl: 24px;
    --t-figure-l: 20px;
    --t-title: 15px;
    --gut: 16px;
    --head-h: 56px;
    --ticker-h: 32px;
    --sec-gap: 64px;
    --tabbar-h: 60px;
  }
}