src/theme.ts

/**
 * MUI theme - mirrors the mobile app + emotions / telepresence
 * convention so Marionette feels like a natural extension of the
 * Reachy Mini shell when embedded.
 *
 * Two prebuilt instances (light + dark) selected at runtime by
 * `embed.tsx` from the URL `?theme` query param or the host's
 * `host:theme-changed` message. Pre-building both avoids a flash
 * when the user toggles their system appearance.
 */
import { createTheme, type Theme } from "@mui/material/styles";

const ACCENT = "#FF9500";
const RADIUS = 12;
const FONT_FAMILY =
  'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif';

function buildTheme(mode: "light" | "dark"): Theme {
  const isDark = mode === "dark";
  return createTheme({
    palette: {
      mode,
      primary: { main: ACCENT },
      background: {
        default: isDark ? "#101013" : "#fafafa",
        paper: isDark ? "#1a1a1a" : "#ffffff",
      },
      text: {
        primary: isDark ? "#f5f5f5" : "#111111",
        secondary: isDark ? "rgba(255,255,255,0.72)" : "rgba(0,0,0,0.65)",
      },
      divider: isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)",
    },
    typography: {
      fontFamily: FONT_FAMILY,
      button: { textTransform: "none", fontWeight: 600 },
    },
    shape: { borderRadius: RADIUS },
    components: {
      MuiCssBaseline: {
        styleOverrides: {
          html: {
            backgroundColor: isDark ? "#101013" : "#fafafa",
            minHeight: ["100vh", "100dvh"],
          },
          body: {
            backgroundColor: isDark ? "#101013" : "#fafafa",
            minHeight: ["100vh", "100dvh"],
            margin: 0,
            // Wizard recording UX benefits from no rubber-band scroll
            // (the user is holding the head, not the page).
            overscrollBehavior: "none",
            WebkitTapHighlightColor: "transparent",
          },
          "#root": {
            minHeight: ["100vh", "100dvh"],
            display: "flex",
            flexDirection: "column",
          },
        },
      },
      MuiButton: {
        defaultProps: { disableElevation: true, variant: "outlined" },
        styleOverrides: {
          root: { borderRadius: RADIUS, paddingInline: 20, paddingBlock: 10 },
          outlined: { borderWidth: 1.5 },
          outlinedPrimary: ({ theme }) => ({
            borderColor: theme.palette.primary.main,
            "&:hover": {
              borderWidth: 1.5,
              backgroundColor: `rgba(255, 149, 0, ${
                theme.palette.mode === "dark" ? 0.1 : 0.08
              })`,
            },
          }),
        },
      },
      MuiPaper: {
        styleOverrides: { root: { backgroundImage: "none" } },
      },
      MuiCard: {
        styleOverrides: { root: { borderRadius: RADIUS } },
      },
      MuiTooltip: {
        styleOverrides: {
          tooltip: { fontSize: 12, paddingBlock: 6, paddingInline: 10 },
        },
      },
    },
  });
}

export const lightTheme = buildTheme("light");
export const darkTheme = buildTheme("dark");