/*
 * TokenPilot semantic status visual states.
 *
 * This component layer is intentionally not loaded globally yet.
 * It depends on static/css/tokens.css and complements status.css from
 * the status component foundation stack.
 *
 * Split out from the larger PR #1 status layer to keep the change small
 * and make Fib/Elliott/setup visual state checks easier during the later
 * controlled cascade pilot.
 */

/* Fib visual svg state token layer. */

.fib-svg-anchor-point,
.fib-svg-current-pill{
  stroke:var(--accent-info);
}

.fib-svg-anchor-point.is-end{
  stroke:var(--state-success);
}

.fib-svg-current-text,
.fib-svg-flag{
  fill:var(--accent-info);
}

.fib-svg-flag.is-target{
  fill:var(--state-warning);
}

.fib-svg-table-marker.is-retracement{
  fill:var(--accent-primary);
}

.fib-svg-table-marker.is-extension{
  fill:var(--state-danger);
}

.fib-svg-table-marker.is-golden,
.fib-svg-current-dot,
.fib-svg-table-now-dot{
  fill:var(--state-warning);
}

.fib-svg-table-distance.is-positive{
  fill:var(--state-success);
}

.fib-svg-table-distance.is-negative{
  fill:var(--state-danger);
}

.fib-svg-table-distance.is-neutral{
  fill:var(--state-warning);
}

/* Setup state badge token layer. */

.chip.trade-long,
.chip.setup-active{
  color:var(--state-success-text);
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
  box-shadow:var(--shadow-status-success-ring, 0 0 0 1px var(--state-success-ring) inset);
}

.chip.setup-cautious{
  color:var(--state-warning);
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
  box-shadow:var(--shadow-status-warning-ring, 0 0 0 1px var(--state-warning-ring) inset);
}

.chip.trade-short,
.chip.setup-wait,
.status-badge.missing{
  color:var(--state-danger);
  border-color:var(--state-danger-ring);
  background:var(--state-danger-soft);
  box-shadow:var(--shadow-status-danger-ring, 0 0 0 1px var(--state-danger-ring) inset);
}

.status-badge .dot{
  background:currentColor;
  box-shadow:var(--shadow-status-dot-ring, 0 0 0 4px color-mix(in srgb, var(--surface-card) 16%, transparent));
}

.setup-quality-badges .status-badge small{
  color:color-mix(in srgb, var(--text-secondary) 76%, transparent);
}

/* Fib level status token layer. */

.fib-level-status{
  color:var(--text-primary);
  border-color:var(--border-muted);
  background:var(--surface-card-muted);
}

.fib-status-open{
  color:var(--state-success-text);
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
}

.fib-status-near{
  color:var(--state-warning);
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
}

.fib-status-done{
  color:var(--text-secondary);
  border-color:var(--border-muted);
  background:color-mix(in srgb, var(--surface-card-muted) 82%, transparent);
}

.fib-status-neutral{
  color:var(--text-secondary);
}

/* Elliott SVG state token layer. */

.elliott-line{
  stroke:var(--state-warning);
}

.elliott-line-projected{
  stroke:color-mix(in srgb, var(--state-warning) 72%, transparent);
}

.elliott-target-zone{
  fill:var(--state-warning-soft);
  stroke:var(--state-warning-ring);
}

.elliott-point{
  fill:var(--surface-card-muted);
  stroke:var(--state-warning);
}

.elliott-point.projected{
  stroke:color-mix(in srgb, var(--state-warning) 82%, transparent);
}

.elliott-target-label,
.elliott-point-wave{
  fill:var(--state-warning);
}

.elliott-target-band{
  fill:var(--text-secondary);
}

.elliott-point-price{
  fill:var(--text-primary);
}

/* Fib SVG table highlight token layer. */

.fib-svg-table-divider{
  stroke:var(--border-muted);
}

.fib-svg-table-separator{
  stroke:color-mix(in srgb, var(--border-muted) 72%, transparent);
}

.fib-svg-table-highlight{
  fill:color-mix(in srgb, var(--surface-card-muted) 72%, transparent);
}

.fib-svg-table-highlight.is-current{
  fill:var(--state-warning-soft);
  stroke:var(--state-warning-ring);
}

.fib-svg-table-highlight.is-golden{
  fill:color-mix(in srgb, var(--state-warning-soft) 72%, transparent);
}

.fib-svg-current-dot{
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--state-warning) 35%, transparent));
}