/* ========================================================================
   Wanted × Binance — colors_and_type.css
   ────────────────────────────────────────
   Typography, spacing, radii, shadows: PRESERVED from the Wanted Design
   System (Pretendard, KR-first letter-spacing, role names, scale).
   Color tokens: REPLACED with Binance's palette (Binance Yellow primary,
   near-black canvas, trading green/red semantics).

   Light theme is the default (transactional surfaces). Dark theme is the
   marketing / trading-dashboard default and is exposed via
   [data-theme="dark"]. Yellow CTAs and trading green/red are shared
   across both modes — only canvas/surface/text tones flip.
   ======================================================================== */

/* ---------- Webfont (Pretendard, self-hosted) --------------------------- */
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Bold.woff2") format("woff2");
}

:root {
  /* ============= ATOMIC COLORS (Binance) ===============================
     A single accent (Binance Yellow) does all the brand voltage. The
     rest of the palette is near-neutrals tuned for trading-platform
     density, plus trading green/red semantics.
     ==================================================================== */

  /* Brand — the only accent the system needs */
  --b-yellow:           #FCD535;   /* primary brand yellow */
  --b-yellow-active:    #F0B90B;   /* press / darker hover */
  --b-yellow-disabled:  #3A3A1F;   /* desat dark-yellow on dark canvas */
  --b-yellow-soft:      #FEF6D2;   /* tint for badges / highlights on light */

  /* Neutrals — dark canvas + steps */
  --b-canvas-dark:      #0B0E11;   /* near-black, slight warm tint */
  --b-surface-card-d:   #1E2329;   /* elevated cards on dark */
  --b-surface-elev-d:   #2B3139;   /* nested cards, hovered nav, chart bg */
  --b-hairline-dark:    #2B3139;   /* same hex as surface-elev: borders ≈ steps */

  /* Neutrals — light canvas + steps */
  --b-canvas-light:     #FFFFFF;
  --b-surface-soft-l:   #FAFAFA;   /* footer, disabled */
  --b-surface-strong-l: #F5F5F5;   /* muted form input bg */
  --b-hairline-light:   #EAECEF;   /* the most-used token across the system */
  --b-border-strong:    #CDD1D6;   /* heavier disabled secondary border */

  /* Text — multi-mode */
  --b-ink:              #181A20;   /* strongest text on light */
  --b-body-on-dark:     #EAECEF;   /* default running-text on dark */
  --b-muted:            #707A8A;   /* footer links, captions, headers */
  --b-muted-strong:     #929AA5;   /* emphasized labels */

  /* Trading semantics (used as text color, not surface fills) */
  --b-trading-up:       #0ECB81;   /* price up / Long / Buy */
  --b-trading-down:     #F6465D;   /* price down / Short / Sell */
  --b-trading-up-soft:  rgba(14, 203, 129, 0.12);
  --b-trading-down-soft:rgba(246, 70, 93, 0.12);

  /* Info / focus */
  --b-info:             #3B82F6;   /* inline info badges, focus ring base */
  --b-info-ring:        rgba(59, 130, 246, 0.5);

  /* Single-product accent (Smart Money) — DO NOT generalize */
  --b-accent-turquoise: #2DBDB6;

  /* Common shorthands */
  --b-white: #FFFFFF;
  --b-black: #000000;

  /* ============= SEMANTIC TOKENS (Light = transactional default) =======
     Wanted's role names are preserved (color-fg-strong, color-bg-base,
     color-line-normal, color-primary, ...) — only the values are remapped
     onto Binance's palette so existing components keep working.
     ==================================================================== */

  /* Foreground / labels */
  --color-fg-strong:    var(--b-ink);
  --color-fg-normal:    var(--b-ink);
  --color-fg-alt:       var(--b-muted);
  --color-fg-assistive: var(--b-muted-strong);
  --color-fg-disabled:  var(--b-border-strong);
  --color-fg-onAccent:  var(--b-ink);   /* black text on yellow */

  /* Backgrounds */
  --color-bg-base:      var(--b-canvas-light);
  --color-bg-elevated:  var(--b-canvas-light);
  --color-bg-subtle:    var(--b-surface-soft-l);
  --color-bg-muted:     var(--b-surface-strong-l);
  --color-bg-inverse:   var(--b-canvas-dark);

  /* Lines / borders */
  --color-line-strong:  var(--b-border-strong);
  --color-line-normal:  var(--b-hairline-light);
  --color-line-neutral: var(--b-hairline-light);
  --color-line-subtle:  rgba(234, 236, 239, 0.6);

  /* Brand & status — primary maps to Binance Yellow on BOTH themes */
  --color-primary:        var(--b-yellow);
  --color-primary-hover:  var(--b-yellow-active);
  --color-primary-press:  var(--b-yellow-active);
  --color-primary-bg:     var(--b-yellow-soft);
  --color-status-positive:var(--b-trading-up);
  --color-status-cautionary:var(--b-yellow-active);
  --color-status-negative:var(--b-trading-down);
  --color-status-info:    var(--b-info);

  /* Trading semantics passthrough */
  --color-trading-up:     var(--b-trading-up);
  --color-trading-down:   var(--b-trading-down);

  /* Component fills (chips, hovers) */
  --color-fill-normal:    rgba(112, 122, 138, 0.08);
  --color-fill-strong:    rgba(112, 122, 138, 0.16);
  --color-fill-onAccent:  rgba(24, 26, 32, 0.10);

  /* Inverse — used when the surface is dark */
  --color-inverse-primary: var(--b-yellow);

  /* Focus ring */
  --color-focus-ring:     var(--b-info-ring);

  /* ============= ELEVATION =============================================
     Binance is a flat-surfaces system — depth comes from canvas/surface
     contrast. The shadow stack stays for cases that need it (sticky
     overlays, dropdowns) but defaults are weaker than Wanted's were.
     ==================================================================== */
  --shadow-emphasize-xsmall:
    0px 1px 2px -1px rgba(11, 14, 17, 0.10);
  --shadow-emphasize-small:
    0px 4px 6px -1px rgba(11, 14, 17, 0.06),
    0px 2px 4px -2px rgba(11, 14, 17, 0.06);
  --shadow-emphasize-medium:
    0px 10px 15px -3px rgba(11, 14, 17, 0.07),
    0px 4px 6px -2px rgba(11, 14, 17, 0.07);
  --shadow-emphasize-large:
    0px 16px 24px -6px rgba(11, 14, 17, 0.08),
    0px 6px 10px -4px rgba(11, 14, 17, 0.08);
  --shadow-emphasize-xlarge:
    0px 24px 38px -10px rgba(11, 14, 17, 0.12),
    0px 10px 15px -5px rgba(11, 14, 17, 0.10);

  --shadow-normal-xsmall:  0px 1px 0.5px 0px rgba(11, 14, 17, 0.08);
  --shadow-normal-small:   0px 2px 1px   0px rgba(11, 14, 17, 0.03),
                           0px 4px 2.5px 0px rgba(11, 14, 17, 0.03);
  --shadow-normal-medium:  0px 4px 2px   0px rgba(11, 14, 17, 0.035),
                           0px 10px 6px  0px rgba(11, 14, 17, 0.035);
  --shadow-normal-large:   0px 6px 3px   0px rgba(11, 14, 17, 0.04),
                           0px 16px 9px  0px rgba(11, 14, 17, 0.04);
  --shadow-normal-xlarge:  0px 10px 5px  0px rgba(11, 14, 17, 0.05),
                           0px 24px 14px 0px rgba(11, 14, 17, 0.06);

  /* ============= RADII =================================================
     Wanted's full ramp preserved. Binance leans on radius-1..radius-5
     (4–12px) and the pill, but the rest stays for richer surfaces.
     ==================================================================== */
  --radius-1: 4px;     /* tags, micro chips, trading-up/down inline pill */
  --radius-2: 6px;     /* primary buttons, primary inputs */
  --radius-3: 8px;     /* search input, content cards, trust badges */
  --radius-4: 10px;
  --radius-5: 12px;    /* elevated cards (markets, QR, CTA bands) */
  --radius-6: 16px;
  --radius-7: 20px;
  --radius-8: 24px;
  --radius-9: 28px;
  --radius-10: 32px;
  --radius-pill: 9999px;

  /* ============= SPACING (4px grid, preserved) ========================= */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;   /* CTA-band padding */
  --space-11: 64px;
  --space-12: 80px;   /* major editorial bands (Binance "section") */
  --space-13: 128px;

  /* ============= TYPE FACES ============================================
     Pretendard for everything (KR-first). We keep BinanceNova / Plex out
     of the stack on purpose — the brief is "Wanted typography, Binance
     palette." Numbers still get tabular-nums via `font-feature-settings`
     so prices stay aligned without a second family.
     ==================================================================== */
  --font-sans:
    "Pretendard",
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Pretendard", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-num: var(--font-sans);   /* stays Pretendard, with tabular-nums */

  /* ============= TYPOGRAPHY ROLES (preserved verbatim) ================= */

  /* Display (poster) */
  --type-display1-size: 64px; --type-display1-lh: 1.25;  --type-display1-ls: -0.017em; --type-display1-weight: 700;
  --type-display2-size: 48px; --type-display2-lh: 1.25;  --type-display2-ls: -0.020em; --type-display2-weight: 700;

  /* Heading */
  --type-heading1-size: 36px; --type-heading1-lh: 1.334; --type-heading1-ls: -0.027em; --type-heading1-weight: 700;
  --type-heading2-size: 30px; --type-heading2-lh: 1.334; --type-heading2-ls: -0.025em; --type-heading2-weight: 700;
  --type-heading3-size: 24px; --type-heading3-lh: 1.334; --type-heading3-ls: -0.023em; --type-heading3-weight: 700;
  --type-heading4-size: 20px; --type-heading4-lh: 1.40;  --type-heading4-ls: -0.020em; --type-heading4-weight: 600;

  /* Title */
  --type-title1-size: 18px;   --type-title1-lh: 1.45; --type-title1-ls: -0.012em; --type-title1-weight: 600;
  --type-title2-size: 16px;   --type-title2-lh: 1.50; --type-title2-ls: -0.006em; --type-title2-weight: 600;
  --type-title3-size: 14px;   --type-title3-lh: 1.50; --type-title3-ls:  0.002em; --type-title3-weight: 600;

  /* Body */
  --type-body1-size: 16px;    --type-body1-lh: 1.50; --type-body1-ls: 0.006em;  --type-body1-weight: 500;
  --type-body2-size: 15px;    --type-body2-lh: 1.55; --type-body2-ls: 0.004em;  --type-body2-weight: 500;
  --type-body3-size: 14px;    --type-body3-lh: 1.50; --type-body3-ls: 0.002em;  --type-body3-weight: 400;

  /* Label / button */
  --type-label1-size: 14px;   --type-label1-lh: 1.43; --type-label1-ls: 0.002em; --type-label1-weight: 600;
  --type-label2-size: 13px;   --type-label2-lh: 1.43; --type-label2-ls: 0.002em; --type-label2-weight: 600;
  --type-label3-size: 12px;   --type-label3-lh: 1.50; --type-label3-ls: 0.004em; --type-label3-weight: 600;

  /* Caption */
  --type-caption1-size: 12px; --type-caption1-lh: 1.50; --type-caption1-ls: 0.004em; --type-caption1-weight: 500;
  --type-caption2-size: 11px; --type-caption2-lh: 1.45; --type-caption2-ls: 0.006em; --type-caption2-weight: 500;
}

/* ============= DARK THEME (marketing / trading default) ================
   Flip canvas/surface/text — the yellow primary stays identical.
   ====================================================================== */
[data-theme="dark"] {
  --color-fg-strong:    var(--b-white);
  --color-fg-normal:    var(--b-body-on-dark);
  --color-fg-alt:       var(--b-muted-strong);
  --color-fg-assistive: var(--b-muted);
  --color-fg-disabled:  rgba(234, 236, 239, 0.32);
  --color-fg-onAccent:  var(--b-ink);   /* still black on yellow */

  --color-bg-base:      var(--b-canvas-dark);
  --color-bg-elevated:  var(--b-surface-card-d);
  --color-bg-subtle:    var(--b-canvas-dark);
  --color-bg-muted:     var(--b-surface-elev-d);
  --color-bg-inverse:   var(--b-canvas-light);

  --color-line-strong:  var(--b-muted);
  --color-line-normal:  var(--b-hairline-dark);
  --color-line-neutral: var(--b-hairline-dark);
  --color-line-subtle:  rgba(43, 49, 57, 0.6);

  /* Yellow stays the same on dark — that's the whole point */
  --color-primary:        var(--b-yellow);
  --color-primary-hover:  var(--b-yellow-active);
  --color-primary-press:  var(--b-yellow-active);
  --color-primary-bg:     rgba(252, 213, 53, 0.12);

  --color-fill-normal:    rgba(234, 236, 239, 0.06);
  --color-fill-strong:    rgba(234, 236, 239, 0.12);
  --color-fill-onAccent:  rgba(24, 26, 32, 0.16);

  --color-inverse-primary: var(--b-yellow);
}

/* ============= BASE SEMANTIC ELEMENT MAPPINGS ========================== */
html, body {
  font-family: var(--font-sans);
  color: var(--color-fg-normal);
  background: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* tnum keeps numbers tabular even without BinancePlex */
  font-feature-settings: "ss10", "tnum", "cv11";
}

h1 { font-size: var(--type-heading1-size); line-height: var(--type-heading1-lh); letter-spacing: var(--type-heading1-ls); font-weight: var(--type-heading1-weight); color: var(--color-fg-strong); margin: 0; }
h2 { font-size: var(--type-heading2-size); line-height: var(--type-heading2-lh); letter-spacing: var(--type-heading2-ls); font-weight: var(--type-heading2-weight); color: var(--color-fg-strong); margin: 0; }
h3 { font-size: var(--type-heading3-size); line-height: var(--type-heading3-lh); letter-spacing: var(--type-heading3-ls); font-weight: var(--type-heading3-weight); color: var(--color-fg-strong); margin: 0; }
h4 { font-size: var(--type-heading4-size); line-height: var(--type-heading4-lh); letter-spacing: var(--type-heading4-ls); font-weight: var(--type-heading4-weight); color: var(--color-fg-strong); margin: 0; }
p  { font-size: var(--type-body1-size);    line-height: var(--type-body1-lh);    letter-spacing: var(--type-body1-ls);    font-weight: var(--type-body1-weight);    margin: 0; }
small { font-size: var(--type-caption1-size); line-height: var(--type-caption1-lh); letter-spacing: var(--type-caption1-ls); }
code, pre { font-family: var(--font-mono); }

/* Utility classes mirroring Figma role names */
.t-display1 { font: var(--type-display1-weight) var(--type-display1-size)/var(--type-display1-lh) var(--font-sans); letter-spacing: var(--type-display1-ls); }
.t-display2 { font: var(--type-display2-weight) var(--type-display2-size)/var(--type-display2-lh) var(--font-sans); letter-spacing: var(--type-display2-ls); }
.t-heading1 { font: var(--type-heading1-weight) var(--type-heading1-size)/var(--type-heading1-lh) var(--font-sans); letter-spacing: var(--type-heading1-ls); }
.t-heading2 { font: var(--type-heading2-weight) var(--type-heading2-size)/var(--type-heading2-lh) var(--font-sans); letter-spacing: var(--type-heading2-ls); }
.t-heading3 { font: var(--type-heading3-weight) var(--type-heading3-size)/var(--type-heading3-lh) var(--font-sans); letter-spacing: var(--type-heading3-ls); }
.t-heading4 { font: var(--type-heading4-weight) var(--type-heading4-size)/var(--type-heading4-lh) var(--font-sans); letter-spacing: var(--type-heading4-ls); }
.t-title1   { font: var(--type-title1-weight)   var(--type-title1-size)/var(--type-title1-lh)   var(--font-sans); letter-spacing: var(--type-title1-ls); }
.t-title2   { font: var(--type-title2-weight)   var(--type-title2-size)/var(--type-title2-lh)   var(--font-sans); letter-spacing: var(--type-title2-ls); }
.t-title3   { font: var(--type-title3-weight)   var(--type-title3-size)/var(--type-title3-lh)   var(--font-sans); letter-spacing: var(--type-title3-ls); }
.t-body1    { font: var(--type-body1-weight)    var(--type-body1-size)/var(--type-body1-lh)    var(--font-sans); letter-spacing: var(--type-body1-ls); }
.t-body2    { font: var(--type-body2-weight)    var(--type-body2-size)/var(--type-body2-lh)    var(--font-sans); letter-spacing: var(--type-body2-ls); }
.t-body3    { font: var(--type-body3-weight)    var(--type-body3-size)/var(--type-body3-lh)    var(--font-sans); letter-spacing: var(--type-body3-ls); }
.t-label1   { font: var(--type-label1-weight)   var(--type-label1-size)/var(--type-label1-lh)   var(--font-sans); letter-spacing: var(--type-label1-ls); }
.t-label2   { font: var(--type-label2-weight)   var(--type-label2-size)/var(--type-label2-lh)   var(--font-sans); letter-spacing: var(--type-label2-ls); }
.t-caption1 { font: var(--type-caption1-weight) var(--type-caption1-size)/var(--type-caption1-lh) var(--font-sans); letter-spacing: var(--type-caption1-ls); }
.t-caption2 { font: var(--type-caption2-weight) var(--type-caption2-size)/var(--type-caption2-lh) var(--font-sans); letter-spacing: var(--type-caption2-ls); }

/* Numbers — Pretendard with tabular-nums for trading-row alignment */
.t-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.t-up   { color: var(--color-trading-up); }
.t-down { color: var(--color-trading-down); }