"use client";

import { MantineColorsTuple, createTheme } from "@mantine/core";

const KccbColors: MantineColorsTuple = [
  "#e3f2fd", "#bbdefb", "#90caf9", "#64b5f6", "#42a5f5",
  "#2196f3", "#1e88e5", "#1976d2", "#1565c0", "#0d47a1"
];

export const KccbTheme = createTheme({
  /* Put your mantine theme override here */
  primaryColor: 'kccb-colors',
  colors: {
    'kccb-colors': KccbColors
  },
  //Typography settings
  fontFamily: "Inter, Roboto, sans-serif",
  headings: {
    fontFamily: "Inter, Roboto, sans-serif",
    fontWeight: '700',
    sizes: {
      h1: { fontSize: "2.2rem", lineHeight: '1.2' },
      h2: { fontSize: "1.8rem", lineHeight: '1.3' },
      h3: { fontSize: "1.5rem", lineHeight: '1.35' },
    },
  },
  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
  },
});