/* ============================================================
 * FONT LOADING -- IBM Plex Sans (chrome/body) + IBM Plex Mono (numeric)
 * Bloomberg / MarketSurge / IBD terminal pairing.
 * ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
 * Universe Freedom -- Terminal design tokens
 * Bloomberg Terminal + IBD MarketSurge + desk chrome
 * ============================================================
 * Variable names preserved (--bnb-mint still means PRIMARY accent)
 * so the rest of the site picks up the skin without a rewrite.
 *
 * Language:
 *   Black field. Amber focus. Green/red only for tape.
 *   Hairlines, not glow. Boxy radii. Tabular numbers.
 * ============================================================ */

:root {
  /* Surfaces -- cooler black, like a terminal, not warm fintech charcoal */
  --bnb-bg:           #050608;
  --bnb-bg-elev:      #0A0C10;
  --bnb-surface:      #0E1116;
  --bnb-surface-alt:  #14181F;
  --bnb-surface-hi:   #1A1F28;
  --bnb-border:       rgba(255, 255, 255, 0.08);
  --bnb-border-hi:    rgba(255, 255, 255, 0.14);
  --bnb-border-focus: rgba(255, 138, 0, 0.45);
  --bnb-overlay:      rgba(5, 6, 8, 0.88);

  --bnb-card-bg:      var(--bnb-surface);
  --bnb-card-bg-hover: var(--bnb-surface-alt);
  --bnb-card-border:  1px solid var(--bnb-border);

  /* Text */
  --bnb-text:         #E8EAED;
  --bnb-text-strong:  #FFFFFF;
  --bnb-text-muted:   #9AA3AD;
  --bnb-text-faint:   #6B7380;
  --bnb-text-on-accent: #0A0A0A;

  /* Brand -- Bloomberg/IBD amber. Name kept as --bnb-mint for compatibility. */
  --bnb-mint:         #FF8A00;
  --bnb-mint-hi:      #FFB347;
  --bnb-mint-dim:     rgba(255, 138, 0, 0.12);
  --bnb-mint-soft:    rgba(255, 138, 0, 0.28);
  --bnb-mint-glow:    0 0 0 2px rgba(255, 138, 0, 0.28);

  --bnb-cyan:         #4AA3C7;
  --bnb-cyan-hi:      #6BB8D6;
  --bnb-cyan-dim:     rgba(74, 163, 199, 0.12);

  --bnb-purple:       #7A8BA3;
  --bnb-purple-hi:    #9AABBF;
  --bnb-purple-dim:   rgba(122, 139, 163, 0.14);
  --bnb-pink:         #C46B7A;
  --bnb-pink-dim:     rgba(196, 107, 122, 0.14);
  --bnb-crypto:       #FF8A00;
  --bnb-crypto-hi:    #FFB347;
  --bnb-crypto-dim:   rgba(255, 138, 0, 0.14);

  --bnb-slate-900:    #050608;
  --bnb-slate-800:    #12151C;
  --bnb-slate-700:    #2A3140;
  --bnb-slate-500:    #6B7380;
  --bnb-slate-400:    #9AA3AD;
  --bnb-slate-300:    #C5CDD6;

  --bnb-gradient:     linear-gradient(180deg, #FF8A00 0%, #E07000 100%);
  --bnb-gradient-soft: linear-gradient(180deg, rgba(255,138,0,0.10) 0%, rgba(255,138,0,0.02) 100%);

  /* Semantic */
  --bnb-success:      #2FBF71;
  --bnb-success-bg:   rgba(47, 191, 113, 0.14);
  --bnb-warn:         #F5B547;
  --bnb-warn-bg:      rgba(245, 181, 71, 0.14);
  --bnb-error:        #EF4E5A;
  --bnb-error-bg:     rgba(239, 78, 90, 0.14);
  --bnb-info:         var(--bnb-cyan);
  --bnb-info-bg:      var(--bnb-cyan-dim);

  /* Tape: up/down */
  --bnb-up:           #2FBF71;
  --bnb-up-bg:        rgba(47, 191, 113, 0.14);
  --bnb-up-strong:    #45D489;
  --bnb-down:         #EF4E5A;
  --bnb-down-bg:      rgba(239, 78, 90, 0.14);
  --bnb-down-strong:  #FF6B76;
  --bnb-neutral:      #9AA3AD;
  --bnb-neutral-bg:   rgba(154, 163, 173, 0.10);

  /* Type -- IBM Plex (institutional, terminal) */
  --bnb-font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bnb-font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --bnb-font-mono:    "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --bnb-font-numeric: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  --bnb-text-2xs:  0.6875rem;
  --bnb-text-xs:   0.75rem;
  --bnb-text-sm:   0.8125rem;
  --bnb-text-base: 0.9375rem;
  --bnb-text-md:   1rem;
  --bnb-text-lg:   1.125rem;
  --bnb-text-xl:   1.375rem;
  --bnb-text-2xl:  1.75rem;
  --bnb-text-3xl:  2.25rem;
  --bnb-text-4xl:  3rem;
  --bnb-text-hero: 4rem;

  --bnb-leading-tight:  1.12;
  --bnb-leading-snug:   1.28;
  --bnb-leading-normal: 1.5;
  --bnb-leading-relaxed: 1.65;

  --bnb-weight-regular:  400;
  --bnb-weight-medium:   500;
  --bnb-weight-semibold: 600;
  --bnb-weight-bold:     700;
  --bnb-weight-extrabold: 700;

  --bnb-tracking-tightest: -0.03em;
  --bnb-tracking-tight:    -0.01em;
  --bnb-tracking-normal:   0;
  --bnb-tracking-wide:     0.06em;
  --bnb-tracking-wider:    0.14em;

  --bnb-space-0:  0;
  --bnb-space-1:  4px;
  --bnb-space-2:  8px;
  --bnb-space-3:  12px;
  --bnb-space-4:  16px;
  --bnb-space-5:  20px;
  --bnb-space-6:  24px;
  --bnb-space-7:  28px;
  --bnb-space-8:  32px;
  --bnb-space-10: 40px;
  --bnb-space-12: 48px;
  --bnb-space-16: 64px;
  --bnb-space-20: 80px;
  --bnb-space-24: 96px;

  /* Boxy terminal radii -- Bloomberg is not a pill UI */
  --bnb-radius-xs:   2px;
  --bnb-radius-sm:   3px;
  --bnb-radius:      4px;
  --bnb-radius-lg:   6px;
  --bnb-radius-xl:   8px;
  --bnb-radius-full: 999px;

  --bnb-shadow-xs:  0 1px 0 rgba(255,255,255,0.04);
  --bnb-shadow-sm:  0 1px 0 rgba(255,255,255,0.04);
  --bnb-shadow:     0 8px 24px rgba(0, 0, 0, 0.45);
  --bnb-shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.5);
  --bnb-shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.55);

  --bnb-glow-mint:     none;
  --bnb-glow-mint-lg:  none;
  --bnb-glow-cyan:     none;

  --bnb-inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --bnb-inset-hairline-strong: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --bnb-ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --bnb-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --bnb-ease-spring:    cubic-bezier(0.22, 1, 0.36, 1);
  --bnb-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  --bnb-duration-fast:    0.12s;
  --bnb-duration:         0.18s;
  --bnb-duration-slow:    0.28s;
  --bnb-duration-slower:  0.4s;

  --bnb-content-width:    1280px;
  --bnb-content-narrow:   760px;
  --bnb-content-wide:     1440px;
  --bnb-touch-target-min: 44px;
  --bnb-gutter:           var(--bnb-space-4);
  --bnb-gutter-lg:        var(--bnb-space-6);

  --bnb-z-base:    0;
  --bnb-z-raised:  10;
  --bnb-z-sticky:  100;
  --bnb-z-header:  500;
  --bnb-z-overlay: 1000;
  --bnb-z-modal:   2000;
  --bnb-z-toast:   3000;
  --bnb-z-pill:    2147483640;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--bnb-font-body);
  font-size: var(--bnb-text-base);
  line-height: var(--bnb-leading-normal);
  color: var(--bnb-text);
  background: var(--bnb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bnb-font-display);
  font-weight: var(--bnb-weight-semibold);
  letter-spacing: var(--bnb-tracking-tight);
  line-height: var(--bnb-leading-tight);
  color: var(--bnb-text);
  margin: 0;
}

a {
  color: var(--bnb-mint);
  text-decoration: none;
  transition: color var(--bnb-duration-fast) var(--bnb-ease);
}
a:hover { color: var(--bnb-mint-hi); }
a:focus-visible {
  outline: 2px solid var(--bnb-mint);
  outline-offset: 3px;
}

.bnb-num,
.price,
.pct,
.stat-value,
.metric-value,
.kpi-value,
[data-num] {
  font-family: var(--bnb-font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--bnb-tracking-tight);
}

.bnb-up      { color: var(--bnb-up); }
.bnb-up-bg   { background: var(--bnb-up-bg); color: var(--bnb-up); }
.bnb-down    { color: var(--bnb-down); }
.bnb-down-bg { background: var(--bnb-down-bg); color: var(--bnb-down); }
.bnb-neutral { color: var(--bnb-neutral); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--bnb-mint);
  outline-offset: 2px;
}

::selection {
  background: var(--bnb-mint-soft);
  color: var(--bnb-text-strong);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid transparent;
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: white; color: black; }
  * { box-shadow: none !important; text-shadow: none !important; }
}

/* Day (paper) — uf-theme.js may still overwrite these from a custom bg. */
html[data-uf-theme="day"] {
  color-scheme: light;
  --bnb-bg:           #F3EFE6;
  --bnb-bg-elev:      #FFFDF8;
  --bnb-surface:      #FFFCF6;
  --bnb-surface-alt:  #E8E2D4;
  --bnb-surface-hi:   #DDD6C6;
  --bnb-border:       rgba(16, 20, 28, 0.16);
  --bnb-border-hi:    rgba(16, 20, 28, 0.28);
  --bnb-border-focus: rgba(180, 90, 0, 0.50);
  --bnb-overlay:      rgba(243, 239, 230, 0.88);
  --bnb-card-bg:      var(--bnb-surface);
  --bnb-card-bg-hover: var(--bnb-surface-alt);
  --bnb-text:         #141820;
  --bnb-text-strong:  #0A0C10;
  --bnb-text-muted:   #4E5662;
  --bnb-text-faint:   #6B7380;
  --bnb-text-on-accent: #0A0A0A;
  --bnb-slate-900:    #141820;
  --bnb-slate-800:    #E8E2D4;
  --bnb-slate-700:    #C5BBA8;
  --bnb-slate-500:    #6B7380;
  --bnb-slate-400:    #4E5662;
  --bnb-slate-300:    #2A3140;
}

html[data-uf-theme="night"] {
  color-scheme: dark;
}