import type { CSSProperties } from "react";

export const themeTokens = {
  colors: {
    primary: {
      DEFAULT: "var(--color-primary)",
      foreground: "var(--color-on-primary)"
    },
    background: "var(--color-background)",
    foreground: "var(--color-foreground)",
    muted: "var(--color-muted)",
    accent: "var(--color-accent)",
    border: "var(--color-border)",
    panel: "var(--color-panel)"
  },
  fontFamily: {
    sans: ["'Manrope'", "Inter", "system-ui", "sans-serif"]
  },
  radius: {
    xs: "var(--radius-xs)",
    sm: "var(--radius-sm)",
    md: "var(--radius-md)",
    lg: "var(--radius-lg)",
    xl: "var(--radius-xl)"
  },
  shadow: {
    sm: "0 10px 20px rgba(5, 7, 11, 0.14)",
    md: "0 18px 28px rgba(5, 7, 11, 0.24)",
    lg: "0 26px 60px rgba(5, 7, 11, 0.35)"
  }
} as const;

export type ThemeMode = "light" | "dark";

export const themeVariables: Record<ThemeMode, CSSProperties> = {
  light: {
    "--color-background": "#f4f5f8",
    "--color-foreground": "#111827",
    "--color-muted": "rgba(17,24,39,0.62)",
    "--color-primary": "#2563eb",
    "--color-on-primary": "#ffffff",
    "--color-accent": "#f97316",
    "--color-border": "rgba(17,24,39,0.12)",
    "--color-panel": "rgba(255,255,255,0.85)",
    "--radius-xs": "6px",
    "--radius-sm": "10px",
    "--radius-md": "14px",
    "--radius-lg": "18px",
    "--radius-xl": "26px"
  },
  dark: {
    "--color-background": "#05070b",
    "--color-foreground": "#e7ecf5",
    "--color-muted": "#a1a8b6",
    "--color-primary": "#f97316",
    "--color-on-primary": "#05070b",
    "--color-accent": "#facc15",
    "--color-border": "#1f2733",
    "--color-panel": "#131821",
    "--radius-xs": "6px",
    "--radius-sm": "10px",
    "--radius-md": "14px",
    "--radius-lg": "18px",
    "--radius-xl": "26px"
  }
};