import type { CSSProperties } from "react";

export const slicePanel: CSSProperties = {
  background: "rgba(9,15,27,0.88)",
  border: "1px solid rgba(148,163,184,0.22)",
  borderRadius: 8,
  backdropFilter: "blur(10px)",
};

export const sliceButton: CSSProperties = {
  border: "1px solid rgba(34,211,238,0.38)",
  background: "rgba(34,211,238,0.08)",
  color: "#d4dce8",
  borderRadius: 6,
  padding: "7px 10px",
  fontFamily: "var(--font-mono)",
  fontSize: 11,
  cursor: "pointer",
};

export const slicePrimaryButton: CSSProperties = {
  ...sliceButton,
  border: "1px solid rgba(240,160,48,0.72)",
  background: "rgba(240,160,48,0.18)",
  color: "#f8fafc",
};

export const metricLabel: CSSProperties = {
  color: "#94a3b8",
  fontFamily: "var(--font-mono)",
  fontSize: 10,
  textTransform: "uppercase",
};
