/** @type {import('tailwindcss').Config}*/
const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",

  ],
  darkMode: 'class',
  daisyui: {

    themes: [
      {
        light: {
          "primary": "#0256bf",
          "secondary": "#36363a",
          "accent": "#7F00FF",
          "neutral": "#2B2B36",
          "base-100": "#ffffff",
          "base-200": "#f8f9fa",
          "base-300": "#dee2e6",
          "base-content": "#000000",
          "info": "#74a0d5",
          "success": "#33cc33",
          "warning": "#97520C",
          "error": "#da0e0e",
        },
      },
      {
        dark: {
          "primary": "#0256bf",
          "secondary": "#36363a",
          "accent": "#7F00FF",
          "neutral": "#2B2B36",
          "base-100": "#252531",
          "base-200": "#1a1a1f",
          "base-300": "#15151a",
          "base-content": "#ffffff",
          "info": "#74a0d5",
          "success": "#33cc33",
          "warning": "#97520C",
          "error": "#da0e0e",
        },
      },
    ],
  },
  plugins: [
    require("daisyui"),
  ],



  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
    extend: {
      colors: {
        'oil-orange': {
          50: '#fff7ed',
          100: '#ffedd5',
          200: '#fed7aa',
          300: '#fdba74',
          400: '#fb923c',
          500: '#ff6600',
          600: '#e55a00',
          700: '#c2410c',
          800: '#9a3412',
          900: '#7c2d12',
        },
        'oil-blue': {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#0256bf',
          600: '#0248a3',
          700: '#1d4ed8',
          800: '#14368f',
          900: '#1e3a5f',
        },
      },
      animation: {
        'fade-in-up': 'fadeInUp 0.6s ease-out forwards',
        'fade-in': 'fadeIn 0.5s ease-out forwards',
        'float': 'float 6s ease-in-out infinite',
      },
      keyframes: {
        fadeInUp: {
          '0%': { opacity: '0', transform: 'translateY(24px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-8px)' },
        },
      },
    },
  },

};

module.exports = config;