import type { Config } from "tailwindcss"
import defaultTheme from "tailwindcss/defaultTheme"

const config = {
  //darkMode: ["class"],
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      screens: {
        "xs": "440px",
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // palletes
        'crusta': {
          '50': '#fff5ed',
          '100': '#ffe8d4',
          '200': '#ffcda8',
          '300': '#ffaa71',
          '400': '#ff7f3e',
          '500': '#fe5711',
          '600': '#ef3d07',
          '700': '#c62908',
          '800': '#9d230f',
          '900': '#7e2010',
          '950': '#440c06',
        },
        'beach': {
          '50': '#fff9ed',
          '100': '#fff2d7',
          '200': '#fee0aa',
          '300': '#fdc874',
          '400': '#fba63c',
          '500': '#f98b16',
          '600': '#ea6f0c',
          '700': '#c2540c',
          '800': '#9a4212',
          '900': '#7c3812',
          '950': '#431a07',
        },
        'prune': {
          '50': '#fbf4f7',
          '100': '#f8ebf0',
          '200': '#f3d7e3',
          '300': '#eab7cb',
          '400': '#dc8aa8',
          '500': '#ce6688',
          '600': '#af4261',
          '700': '#a03651',
          '800': '#843045',
          '900': '#6f2c3c',
          '950': '#43141f',
        },
        'malibu': {
          '50': '#f2f9fd',
          '100': '#e4f0fa',
          '200': '#c3e2f4',
          '300': '#80c4e9',
          '400': '#51afdf',
          '500': '#2b95cc',
          '600': '#1c78ad',
          '700': '#18608c',
          '800': '#185174',
          '900': '#194561',
          '950': '#112c40',
        },
        'night': {
          '50': '#eff2fe',
          '100': '#e2e5fd',
          '200': '#cbd0fa',
          '300': '#abb1f6',
          '400': '#8989f0',
          '500': '#756de7',
          '600': '#6651da',
          '700': '#604cc3',
          '800': '#47389b',
          '900': '#3d347b',
          '950': '#251e48',
        },
        // selenized
        'selenized': {
          'dark': {
            "bg0":    "#103c48",   
            "bg1":    "#184956",   
            "bg2":    "#2d5b69",   
            "dim0":   "#72898f",   
            "fg0":    "#adbcbc",   
            "fg1":    "#cad8d9",   

            "red": "#fa5750",   
            "green": "#75b938",   
            "yellow": "#dbb32d",   
            "blue": "#4695f7",   
            "magenta": "#f275be",   
            "cyan": "#41c7b9", 
            "mint": "#8FDDC0",  
            "orange": "#ed8649",   
            "violet": "#af88eb",   

            "brRed":  "#ff665c",   
            "brGreen":  "#84c747",   
            "brYellow":  "#ebc13d",   
            "brBlue":  "#58a3ff",   
            "brMagenta":  "#ff84cd",   
            "brCyan":  "#53d6c7",   
            "brMint": "#CDF0E5",
            "brOrange":  "#fd9456",   
            "brViolet":  "#bd96fa", 

            "customYellow": "#F8ED91",
          },
          'light': {
            "bg0":   "#fbf3db", 
            "bg1":   "#ece3cc", 
            "bg2":   "#d5cdb6", 
            "dim0":   "#909995", 
            "fg0":   "#53676d", 
            "fg1":   "#3a4d53", 

            "red":   "#d2212d", 
            "green":   "#489100", 
            "yellow":   "#ad8900", 
            "blue":   "#0072d4", 
            "magenta":   "#ca4898", 
            "cyan":   "#009c8f", 
            "orange":   "#c25d1e", 
            "violet":   "#8762c6", 

            "brRed":   "#cc1729", 
            "brGreen":   "#428b00", 
            "brYellow":   "#a78300", 
            "brBlue":   "#006dce", 
            "brMagenta":   "#c44392", 
            "brCyan":   "#00978a", 
            "brOrange":   "#bc5819", 
            "brViolet":   "#825dc0", 

            "customYellow": "#F8ED91",
          },
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
      fontFamily: {
        sans: ["Nunito", ...defaultTheme.fontFamily.sans],
        serif: ["Libre Baskerville", ...defaultTheme.fontFamily.serif],
        mono: ["Monofur for Powerline", ...defaultTheme.fontFamily.mono]
      },
      boxShadow: {
        'lgr': '10px 10px 15px -3px rgb(0 0 0 / 0.1), 4px 4px 6px -4px rgb(0 0 0 / 0.1)'
      }
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config