Tailwind Theme Generator

@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --color-brand-50: #f4f9fb;
  --color-brand-100: #e5f2f5;
  --color-brand-200: #b9ebf8;
  --color-brand-300: #86dcf3;
  --color-brand-400: #4ecbee;
  --color-brand-500: #17bbe8;
  --color-brand-600: #139dc3;
  --color-brand-700: #0f7f9e;
  --color-brand-800: #0c657d;
  --color-brand-900: #075064;
  --color-brand-950: #05313e;

  --color-accent-50: #fbf8f3;
  --color-accent-100: #f6efe4;
  --color-accent-200: #fce2b6;
  --color-accent-300: #facc80;
  --color-accent-400: #f7b545;
  --color-accent-500: #f59e0a;
  --color-accent-600: #ce8408;
  --color-accent-700: #a76b07;
  --color-accent-800: #845505;
  --color-accent-900: #694302;
  --color-accent-950: #412901;

  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      "sm": "640px",
      "md": "768px",
      "lg": "1024px",
      "xl": "1280px",
      "2xl": "1536px",
    },
    extend: {
      fontFamily: {
        sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "ui-monospace", "monospace"],
      },
      colors: {
      brand: {
        50: "#f4f9fb",
        100: "#e5f2f5",
        200: "#b9ebf8",
        300: "#86dcf3",
        400: "#4ecbee",
        500: "#17bbe8",
        600: "#139dc3",
        700: "#0f7f9e",
        800: "#0c657d",
        900: "#075064",
        950: "#05313e",
      },
      accent: {
        50: "#fbf8f3",
        100: "#f6efe4",
        200: "#fce2b6",
        300: "#facc80",
        400: "#f7b545",
        500: "#f59e0a",
        600: "#ce8408",
        700: "#a76b07",
        800: "#845505",
        900: "#694302",
        950: "#412901",
      },
      },
      borderRadius: {
        "xs": "0.125rem",
        "sm": "0.25rem",
        "md": "0.375rem",
        "lg": "0.5rem",
        "xl": "0.75rem",
        "2xl": "1rem",
      },
    },
  },
};