/* BOMB v0.6 — design tokens (ui-ux-spec §0.5) */

:root {
  /* Base */
  --bg-deep:        #0F1219;
  --bg-elev:        #171B24;
  --bg-elev2:       #222734;
  --stroke:         rgba(255, 255, 255, 0.08);
  --stroke-strong:  rgba(255, 255, 255, 0.14);
  --divider:        #252A36;

  /* Text */
  --text-primary:   #F5F7FA;
  --text-secondary: #8A92A6;
  --text-tertiary:  #5A6273;

  /* Accent (single) */
  --accent:         #FF6A2C;
  --accent-soft:    rgba(255, 106, 44, 0.12);
  --accent-line:    rgba(255, 106, 44, 0.32);
  --secondary:      #7C5CFF;

  /* Semantic */
  --profit:         #22E07A;
  --loss:           #FF4D5E;
  --gold:           #F5C24A;
  --lockup:         var(--accent);

  /* Phase */
  --phase-p1:       #3D7BFF;
  --phase-p2:       #FF8A3C;
  --phase-p3:       #FF4D5E;
  --phase-p4:       #D32A4A;
  --phase-p5:       #FFB199;
  --phase-p6:       #FFFFFF;

  /* Room (v0.8: +mid) */
  --room-beginner:  #22E07A;
  --room-mid:       #3D7BFF;
  --room-pro:       #F5C24A;
  --room-whale:     #7C5CFF;

  /* Shape */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Elevation (flat + soft, no outer blur) */
  --elev-1: 0 2px 12px rgba(0, 0, 0, 0.08);
  --elev-2: 0 4px 20px rgba(0, 0, 0, 0.12);

  /* Inner glow — accent only */
  --glow-accent-inner: inset 0 0 12px rgba(255, 106, 44, 0.18);

  /* Type */
  --font-sans: "Geist", "Geist Sans", "Pretendard Variable", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

/* base */
.bomb-root {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-deep);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
.bomb-root, .bomb-root * { box-sizing: border-box; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }

/* dotted grid heatmap line */
.dashed-h {
  background-image: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 50%;
  height: 1px;
}

/* subtle moving caret on price line */
@keyframes pricePulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.price-dot { animation: pricePulse 1.8s ease-in-out infinite; }

/* phase dot pulse (S1) */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,106,44,0.55); }
  70%      { box-shadow: 0 0 0 6px rgba(255,106,44,0); }
}
.dot-active { animation: dotPulse 1.6s ease-out infinite; }