import catppuccin from '@catppuccin/tailwindcss';
import type { Config } from 'tailwindcss';
import { fontFamily } from 'tailwindcss/defaultTheme';

export default {
  content: [
    './src/**/*.{html,ts,scss,css}',
    '../magic/src/**/*.{html,ts,scss,css}',
  ],
  darkMode: ['selector', ':not(.latte)'],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      /**
    --background: var(--ctp-base);
    --foreground: var(--ctp-text);

    --muted: var(--ctp-overlay0);
    --muted-foreground: var(--ctp-overlay1);

    --popover: var(--ctp-mantle);
    --popover-foreground: var(--ctp-text);

    --border: var(--ctp-surface1);
    --input: var(--ctp-surface1);

    --card: var(--ctp-mantle);
    --card-foreground: var(--ctp-text);

    --primary: var(--ctp-mauve);
    --primary-foreground: var(--ctp-base);

    --secondary: var(--ctp-surface0);
    --secondary-foreground: var(--ctp-text);

    --accent: var(--ctp-base);
    --accent-foreground: var(--ctp-text);

    --success: var(--ctp-green);
    --success-foreground: var(--ctp-crust);

    --info: var(--ctp-blue);
    --info-foreground: var(--ctp-crust);

    --warning: var(--ctp-peach);
    --warning-foreground: var(--ctp-crust);

    --destructive: var(--ctp-red);
    --destructive-foreground: var(--ctp-crust);

    --ring: var(--ctp-text);
        */
      colors: {
        border: 'rgba(var(--ctp-overlay1), <alpha-value>)',
        input: 'rgba(var(--ctp-surface2), <alpha-value>)',
        ring: 'rgba(var(--ctp-text), <alpha-value>)',
        background: 'rgba(var(--ctp-base), <alpha-value>)',
        foreground: 'rgba(var(--ctp-text), <alpha-value>)',
        primary: {
          DEFAULT: 'rgba(var(--ctp-lavender), <alpha-value>)',
          foreground: 'rgba(var(--ctp-base), <alpha-value>)',
        },
        secondary: {
          DEFAULT: 'rgba(var(--ctp-surface0), <alpha-value>)',
          foreground: 'rgba(var(--ctp-text), <alpha-value>)',
        },
        destructive: {
          DEFAULT: 'rgba(var(--ctp-red), <alpha-value>)',
          foreground: 'rgba(var(--ctp-crust), <alpha-value>)',
        },
        warning: {
          DEFAULT: 'rgba(var(--ctp-peach), <alpha-value>)',
          foreground: 'rgba(var(--ctp-crust), <alpha-value>)',
        },
        info: {
          DEFAULT: 'rgba(var(--ctp-blue), <alpha-value>)',
          foreground: 'rgba(var(--info-foreground), <alpha-value>)',
        },
        success: {
          DEFAULT: 'rgba(var(--ctp-green), <alpha-value>)',
          foreground: 'rgba(var(--ctp-crust), <alpha-value>)',
        },
        muted: {
          DEFAULT: 'rgba(var(--ctp-overlay0), <alpha-value>)',
          foreground: 'rgba(var(--ctp-overlay1), <alpha-value>)',
        },
        invariant: {
          DEFAULT: 'rgba(var(--ctp-subtext0), <alpha-value>)',
          foreground: 'rgba(var(--ctp-mantle), <alpha-value>)',
        },
        accent: {
          DEFAULT: 'rgba(var(--ctp-base), <alpha-value>)',
          foreground: 'rgba(var(--ctp-text), <alpha-value>)',
        },
        popover: {
          DEFAULT: 'rgba(var(--ctp-mantle), <alpha-value>)',
          foreground: 'rgba(var(--ctp-text), <alpha-value>)',
        },
        card: {
          DEFAULT: 'rgba(var(--ctp-mantle), <alpha-value>)',
          foreground: 'rgba(var(--ctp-text), <alpha-value>)',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      fontFamily: {
        sans: ['Inter', ...fontFamily.sans],
      },
    },
  },
  plugins: [
    catppuccin({
      defaultFlavour: 'mocha',
    }),
  ],
} satisfies Config;