/* Hub2 theme v3: all pages — cyan + square, reference layout */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap");

:root {
  --bg: #071018 !important;
  --bg2: #0d1620 !important;
  --bg3: #122033 !important;
  --b: #2cc3ff14 !important;
  --b2: #2cc3ff33 !important;
  --dim: #ffffff0a !important;
  --t: #e8eef5 !important;
  --t2: #93a4b8 !important;
  --t3: #64748b !important;
  --accent: #2cc3ff !important;
  --accent-b: #5ad2ff !important;
  --accent-dim: #2cc3ff1f !important;
  --accent-glow: #2cc3ff40 !important;
  --live: #00c853 !important;
  --beta: #5eead4 !important;
  --font-sans: "Sora", -apple-system, sans-serif !important;
  --font-mono: "DM Mono", "SF Mono", ui-monospace, monospace !important;
  --r-sm: 0px !important;
  --r-md: 2px !important;
  --r-lg: 2px !important;
  --r-xl: 2px !important;
  --r-pill: 2px !important;
  --shadow-sm: 0 1px 2px #0000004d, 0 1px 3px #00000026 !important;
  --shadow-md: 0 2px 4px #0000004d, 0 4px 12px #0003, 0 0 0 1px #2cc3ff0a !important;
  --shadow-lg: 0 4px 8px #0000004d, 0 8px 24px #00000040, 0 0 0 1px #2cc3ff0f !important;
  --shadow-glow: 0 4px 12px #0000004d, 0 8px 32px #0003, 0 0 40px #2cc3ff14 !important;
  --section-fade: radial-gradient(ellipse 80% 50% at 50% 0%, #2cc3ff08, transparent 70%) !important;
}

html, body {
  background: var(--bg) !important;
  color: var(--t) !important;
  font-family: var(--font-sans) !important;
}

html[class*="manrope"],
html[class*="manrope"] body {
  --font-sans: "Sora", -apple-system, sans-serif !important;
  font-family: "Sora", -apple-system, sans-serif !important;
}

/* Page-local surface tokens used by module CSS */
[class*="__page"],
[class*="module__"] {
  --surface: #0d1620;
  --surface-2: #122033;
  --line: #ffffff14;
  --acc: #2cc3ff;
  --acc-b: #5ad2ff;
  --acc-soft: #2cc3ff1f;
  --acc-line: #2cc3ff38;
  --ink: #e8eef5;
  --ink-2: #93a4b8;
  --ink-3: #64748b;
}

/* Square chrome everywhere under hub2 */
body [class*="card"],
body [class*="Card"],
body [class*="panel"],
body [class*="Panel"],
body [class*="tile"],
body [class*="Tile"],
body [class*="btn"],
body [class*="Btn"],
body [class*="button"],
body [class*="Button"],
body [class*="chip"],
body [class*="Chip"],
body [class*="badge"],
body [class*="Badge"],
body [class*="pill"],
body [class*="Pill"],
body [class*="modal"],
body [class*="Modal"],
body [class*="tab"],
body [class*="Tab"],
body [class*="input"],
body [class*="Input"],
body [class*="select"],
body [class*="Select"],
body [class*="table"],
body [class*="Table"],
body [class*="hero"],
body [class*="Hero"],
body [class*="shell"],
body [class*="topbar"],
body [class*="footer"],
body [class*="Footer"],
body [class*="cta"],
body [class*="Cta"],
body [class*="soon"],
body [class*="Soon"],
body [class*="tag"],
body [class*="Tag"],
body [class*="band"],
body [class*="Band"],
body [class*="wrap"],
body [class*="Wrap"],
body [class*="box"],
body [class*="Box"],
body [class*="menu"],
body [class*="Menu"],
body [class*="drawer"],
body [class*="Drawer"],
body [class*="sheet"],
body [class*="Sheet"],
body [class*="search"],
body [class*="Search"],
body [class*="progress"],
body [class*="Progress"],
body [class*="bar"]:not(hr),
body [class*="Bar"]:not(hr),
body [class*="row"],
body [class*="Row"],
body [class*="cell"],
body [class*="Cell"],
body [class*="item"],
body [class*="Item"],
body [class*="list"],
body [class*="List"],
body [class*="nav"],
body [class*="Nav"],
body [class*="section"],
body [class*="Section"] {
  border-radius: 2px !important;
}

/* Legend / status / step chrome → square (keep mock traffic-light dots round) */
body [class*="legendDot"],
body [class*="liveDot"],
body [class*="phaseDot"],
body [class*="stepDot"],
body [class*="stepIdx"],
body [class*="flowStepNum"],
body [class*="obStepNum"],
body [class*="leverNode"],
body [class*="cycleDisc"],
body [class*="statusCore"],
body [class*="qdot"],
body [class*="finaleDot"],
body [class*="gdLive"],
body [class*="tvPlus"],
body [class*="tvResultEq"],
body [class*="toTop"],
body [class*="tvDot"] {
  border-radius: 2px !important;
}

/* Presentation-style bottom pill → square */
body [class*="section-nav"] [class*="pill"],
body [class*="section-nav-module"] [class*="pill"] {
  border-radius: 2px !important;
}

/* Kill leftover reference orange end-stops (#e23f00 / #b33700) on hot fills */
body [class*="valueHot"],
body [class*="aggCore"],
body [class*="leverNode"],
body [class*="depthBadge"],
body [class*="stepHot"] [class*="stepDot"],
body [class*="cycleDiscHot"],
body [class*="__finale"]:not([class*="finaleDot"]):not([class*="finaleRow"]):not([class*="finalePoint"]):not([class*="finaleTag"]):not([class*="finaleTitle"]):not([class*="finaleGrid"]) {
  background-image: linear-gradient(160deg, #2cc3ff, #0a8fc4) !important;
}

/* Liquidity accent panel: ref is solid orange gradient → ours solid cyan family */
body [class*="accentPanel"] {
  background:
    radial-gradient(80% 60% at 80% 30%, #ffffff33, transparent 60%),
    linear-gradient(135deg, #5ad2ff 0%, #2cc3ff 42%, #0e8fbf 100%) !important;
  color: #fff !important;
  border-radius: 2px !important;
}

/* Allocation clarity note stays cyan-bordered / square */
body [class*="clarityNote"] {
  border-radius: 2px !important;
  border-color: var(--acc-line, #2cc3ff38) !important;
  background: var(--acc-soft, #2cc3ff1f) !important;
}

body [class*="clarityNote"] strong {
  color: var(--acc-b, #5ad2ff) !important;
}

/* Donut legend swatches must stay square */
body [class*="legendDot"] {
  border-radius: 0 !important;
  width: 12px;
  height: 12px;
}

svg rect[rx]:not([rx="0"]) {
  /* hint only — rx already patched in HTML where possible */
}