// DoseMate design system — tokens + reusable inline-style helpers.

export const T = {
  // brand
  green: "#16a34a",
  greenDark: "#15803d",
  forest: "#1B4332",
  teal: "#0d9488",
  gradient: "linear-gradient(135deg, #16a34a 0%, #0d9488 100%)",
  gradientWarm: "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)",
  gradientSoft: "linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%)",

  // surfaces
  bg: "#f5f7fa",
  surface: "#ffffff",
  surfaceAlt: "#f8fafc",
  border: "#e7ebf0",

  // text
  text: "#0f172a",
  muted: "#64748b",
  faint: "#94a3b8",

  // semantic
  amber: "#f59e0b",
  orange: "#ea580c",
  danger: "#ef4444",
  blue: "#3b82f6",
  success: "#16a34a",

  // shape
  radius: 16,
  radiusSm: 10,
  radiusLg: 22,
  pill: 999,

  // shadow
  shadow: "0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04)",
  shadowMd: "0 6px 18px rgba(16,24,40,.08)",
  shadowLg: "0 18px 50px rgba(16,24,40,.18)",
  shadowGreen: "0 8px 22px rgba(22,163,74,.28)",

  font: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
}

export const card = {
  background: T.surface,
  border: `1px solid ${T.border}`,
  borderRadius: T.radius,
  boxShadow: T.shadow,
}

export const btnPrimary = {
  display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
  padding: "11px 20px", borderRadius: T.radiusSm, border: "none",
  background: T.gradient, color: "#fff", fontSize: 14, fontWeight: 600,
  cursor: "pointer", boxShadow: T.shadowGreen, transition: "transform .12s, box-shadow .12s",
}

export const btnGhost = {
  display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 7,
  padding: "10px 16px", borderRadius: T.radiusSm, border: `1px solid ${T.border}`,
  background: T.surface, color: T.text, fontSize: 13.5, fontWeight: 600,
  cursor: "pointer", transition: "background .12s, border-color .12s",
}

export const input = {
  width: "100%", boxSizing: "border-box", padding: "12px 14px",
  border: `1px solid ${T.border}`, borderRadius: T.radiusSm, fontSize: 14,
  outline: "none", color: T.text, background: T.surface, fontFamily: T.font,
}

export const pageWrap = (max = 940) => ({
  padding: "clamp(18px, 4vw, 34px) clamp(14px, 4vw, 36px)",
  maxWidth: max, margin: "0 auto", width: "100%", boxSizing: "border-box",
})

// Reusable progress bar
export function ProgressBar({ pct, color = T.green, height = 8 }) {
  return (
    <div style={{ width: "100%", height, background: "#eef2f6", borderRadius: T.pill, overflow: "hidden" }}>
      <div style={{ width: `${pct}%`, height: "100%", background: color, borderRadius: T.pill, transition: "width .5s ease" }} />
    </div>
  )
}