/* ============================================================
   Binance Design System — Colors & Type Tokens
   Inspired by Binance.US visual language
   ============================================================ */

/* ---------- Fonts ----------
   BinancePlex is proprietary. We substitute IBM Plex Sans —
   the closest open metric/feel match (similar character widths,
   tabular numerals, neutral fintech tone).
   FLAG: replace with real BinancePlex .woff2 files when available.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ COLORS ============ */

  /* Primary brand */
  --binance-yellow: #F0B90B;   /* The signature — primary CTAs, accents */
  --binance-gold:   #FFD000;   /* Pill button fills, secondary CTA */
  --light-gold:     #F8D12F;   /* Gradient endpoint, hover-adjacent */
  --active-yellow:  #D0980B;   /* Pressed / active state */
  --focus-blue:     #1EAEDB;   /* Hover/focus accessibility state */

  /* Surface */
  --white:        #FFFFFF;
  --snow:         #F5F5F5;
  --binance-dark: #222126;     /* Dark section bg */
  --dark-card:    #2B2F36;     /* Elevated dark container */
  --ink:          #1E2026;     /* Deepest text + button text on yellow */

  /* Text */
  --text-primary:   #1E2026;
  --text-secondary: #32313A;
  --slate:          #848E9C;   /* Workhorse grey */
  --steel:          #686A6C;
  --muted:          #777E90;
  --hover-dark:     #1A1A1A;

  /* Semantic (data-driven) */
  --crypto-green:   #0ECB81;
  --crypto-red:     #F6465D;

  /* Borders */
  --border-light:   #E6E8EA;
  --border-gold:    #FFD000;

  /* Semantic role aliases (for general consumption) */
  --fg1: var(--text-primary);
  --fg2: var(--text-secondary);
  --fg3: var(--slate);
  --fg-disabled: var(--steel);
  --bg1: var(--white);
  --bg2: var(--snow);
  --bg-dark: var(--binance-dark);
  --accent: var(--binance-yellow);
  --accent-hover: var(--focus-blue);
  --positive: var(--crypto-green);
  --negative: var(--crypto-red);
  --border: var(--border-light);

  /* Gradients */
  --golden-glow: radial-gradient(circle at 50% 50%, #F0B90B 0%, #F8D12F 60%, rgba(248,209,47,0) 100%);
  --dark-fade: linear-gradient(180deg, #222126 0%, rgba(34,33,38,0) 100%);

  /* ============ TYPOGRAPHY ============ */
  --font-sans: 'IBM Plex Sans', 'BinancePlex', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Sizes */
  --fs-display:    60px;
  --fs-display-2:  34px;
  --fs-h1:         28px;
  --fs-h2:         24px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    20px;
  --fs-body:       16px;
  --fs-button:     16px;
  --fs-button-sm:  14.4px;
  --fs-caption:    14px;
  --fs-small:      12px;
  --fs-tiny:       11px;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  /* ============ SPACING (8px base) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;

  /* ============ RADIUS ============ */
  --radius-1:  1px;
  --radius-2:  2px;
  --radius-sm: 6px;    /* Square buttons, small cards */
  --radius-md: 8px;    /* Inputs, data cards */
  --radius-10: 10px;   /* Nav pills */
  --radius-lg: 12px;   /* Content cards */
  --radius-xl: 24px;   /* Video, hero imagery */
  --radius-pill: 50px; /* CTA pill buttons */

  /* ============ SHADOWS ============ */
  --shadow-subtle: rgba(32, 32, 37, 0.05) 0px 3px 5px 0px;
  --shadow-medium: rgba(8, 8, 8, 0.05) 0px 3px 5px 5px;
  --shadow-pill:   rgb(153,153,153) 0px 2px 10px -3px;
  --shadow-heavy:  rgba(0,0,0,0.45) 0px 32px 37px;

  /* ============ MOTION ============ */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;

  /* ============ LAYOUT ============ */
  --container-max: 1200px;
}

/* ============ BASE TYPOGRAPHY ============ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'tnum' 1; /* tabular numerals — critical for prices */
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: 1.0;
  color: var(--fg1);
  margin: 0;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.0;
  color: var(--fg1);
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: 1.0;
  color: var(--fg1);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: 1.25;
  color: var(--fg1);
  margin: 0;
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.display-2 {
  font-size: var(--fs-display-2);
  font-weight: var(--fw-bold);
  line-height: 1.0;
}

p, .body {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--fg1);
  margin: 0;
}
.body-lg { font-size: var(--fs-body-lg); font-weight: var(--fw-medium); line-height: 1.5; }
.body-semi { font-size: var(--fs-body); font-weight: var(--fw-semi); line-height: 1.3; }

.caption     { font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: 1.43; color: var(--fg3); }
.caption-semi{ font-size: var(--fs-caption); font-weight: var(--fw-semi);   line-height: 1.5; }
.small       { font-size: var(--fs-small);   font-weight: var(--fw-semi);   line-height: 1.0; }
.tiny        { font-size: var(--fs-tiny);    font-weight: var(--fw-medium); line-height: 1.0; }

a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--t-base);
}
a:hover { color: var(--hover-dark); }

/* Numeric utility — tabular numerals for prices */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.num-up   { color: var(--crypto-green); }
.num-down { color: var(--crypto-red); }