import type { Config } from "tailwindcss";
import colors from "tailwindcss/colors";

export default {
  content: [
    "./app/index.html",
    "./app/src/**/*.{js,jsx,ts,tsx}",
    "./app/src/*.{js,jsx,ts,tsx}",
    "../../libs/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        "custom-font": ["Fira Sans", "sans-serif"],
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
      },
      animation: {
        fadeIn: "fadeIn 0.2s ease-in-out",
      },
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      white: colors.white,
      gray: colors.gray,
      black: colors.black,
      blue: { ...colors.blue, DEFAULT: "#2E70FF" },
      red: { ...colors.red, DEFAULT: "#D33242" },
      green: { ...colors.green, DEFAULT: "#308752" },
      yellow: colors.yellow,
      purple: colors.purple,
      pink: colors.pink,
      orange: colors.orange,
      primary: {
        DEFAULT: "#2d81ff",
        "50": "#eef6ff",
        "100": "#d9ebff",
        "200": "#bcdcff",
        "300": "#8ec7ff",
        "400": "#59a7ff",
        "500": "#2d81ff",
        "600": "#1b63f5",
        "700": "#144ee1",
        "800": "#173fb6",
        "900": "#19398f",
        "950": "#142457",
      },
      secondary: {
        DEFAULT: "#3E3E41",
        "50": "#f6f6f6",
        "100": "#e7e7e7",
        "200": "#d1d1d1",
        "300": "#b0b0b0",
        "400": "#888888",
        "500": "#6d6d6d",
        "600": "#5d5d5d",
        "700": "#4f4f4f",
        "800": "#454545",
        "900": "#3d3d3d",
        "950": "#3E3E41",
      },
      "brand-primary": {
        //sunglo
        DEFAULT: "#2d81ff", //=500
        "50": "#eef6ff",
        "100": "#d9ebff",
        "200": "#bcdcff",
        "300": "#8ec7ff",
        "400": "#59a7ff",
        "500": "#2d81ff",
        "600": "#1b63f5",
        "700": "#144ee1",
        "800": "#173fb6",
        "900": "#19398f",
        "950": "#142457",
      },
      "brand-secondary": {
        DEFAULT: "#3E3E41",
        "50": "#f6f6f6",
        "100": "#e7e7e7",
        "200": "#d1d1d1",
        "300": "#b0b0b0",
        "400": "#888888",
        "500": "#6d6d6d",
        "600": "#5d5d5d",
        "700": "#4f4f4f",
        "800": "#454545",
        "900": "#3d3d3d",
        "950": "#3E3E41",
      },
      "brand-tertiary": {
        //Aquamarine Blue
        DEFAULT: "#1cb6be", //=300
        "50": "#eefdfc",
        "100": "#d4f9f8",
        "200": "#aef3f3",
        "300": "#62e4e6",
        "400": "#38d3d8",
        "500": "#1cb6be",
        "600": "#1a94a0",
        "700": "#1c7682",
        "800": "#1f616b",
        "900": "#1e505b",
        "950": "#0e353e",
      },
      danger: {
        //copper rust
        DEFAULT: "#8f4951", //=700
        "50": "#fbf5f5",
        "100": "#f7ecec",
        "200": "#efdcdc",
        "300": "#e2c0bf",
        "400": "#d19b9c",
        "500": "#bd7679",
        "600": "#a5595f",
        "700": "#8f4951",
        "800": "#743d45",
        "900": "#64373f",
        "950": "#361b1e",
      },
      success: {
        //apple
        DEFAULT: "#40ad48", //=500
        "50": "#f2fbf2",
        "100": "#e2f6e3",
        "200": "#c5edc7",
        "300": "#98dd9d",
        "400": "#64c46b",
        "500": "#40ad48",
        "600": "#2f8a35",
        "700": "#286d2e",
        "800": "#245728",
        "900": "#1f4823",
        "950": "#0c270f",
      },
      action: {
        DEFAULT: "#3E3E41",
        "50": "#f6f6f6",
        "100": "#e7e7e7",
        "200": "#d1d1d1",
        "300": "#b0b0b0",
        "400": "#888888",
        "500": "#6d6d6d",
        "600": "#5d5d5d",
        "700": "#4f4f4f",
        "800": "#454545",
        "900": "#3d3d3d",
        "950": "#3E3E41",
      },
      character: {
        unselected: "#46527C",
        selected: "#6384F4",
        clip: "#7E92DA",
        groupBg: "#2B3448",
        titleBg: "#384763",
        frame: "#6B83D8",
      },
      camera: {
        unselected: "#466C7C",
        selected: "#56BBC1",
        clip: "#5F949F",
        groupBg: "#2B393E",
        titleBg: "#395259",
      },
      global_audio: {
        unselected: "#864C68",
        selected: "#D460A6",
        clip: "#E37BAD",
        groupBg: "#382940",
        titleBg: "#5A3D65",
      },
      object: {
        unselected: "#7C5646",
        selected: "#EA8E5A",
        clip: "#D49D75",
        groupBg: "#372E32",
        titleBg: "#514248",
      },
      prompt: {
        unselected: "#5D4583",
        selected: "#AD7EF9",
        clip: "#926CCF",
        groupBg: "#362D51",
        titleBg: "#634E84",
      },
      keyframe: {
        unselected: "#EEEEEE",
        selected: "#FFDE67",
      },
      assets: {
        background: "#242424",
        selectedTab: "#3E3E41",
      },
      dnd: {
        canDrop: "#46936E",
        canDropBorder: "#66E4A9",
        timeGrid: "#6375B5",
        timeGridBorder: "#7E92DA",
        cannotDrop: "#904948",
        wrapper: "#39394d",
      },
      ui: {
        background: "var(--st-bg)",
        panel: "var(--st-panel)",
        "panel-border": "var(--st-panel-border)",
        controls: "rgb(var(--st-controls-rgb) / <alpha-value>)",
        "controls-button": "rgb(var(--st-controls-rgb) / <alpha-value>)",
        divider: "var(--st-divider)",
      },
      media: {
        "audio-tts": "#6AAA88",
        "audio-v2v": "#6691B9",
        "audio-upload": "#9760C2",
        "audio-demo": "#B96675",
        "is-new": "#FFDC26",
      },
      inference: {
        pending: "#6b728b",
        generating: "#46527C",
        error: "#924C4B",
      },
      "axis-x": "#D33242",
      "axis-y": "#308752",
      "axis-z": "#2E70FF",
      facebook: "#4267b2",
      reddit: "#ff5700",
      whatsapp: "#25d366",
      x: "#000000",
      email: "#858585",
    },
  },
  plugins: [],
  safelist: [
    "bg-character-selected",
    "bg-character-unselected",
    "bg-character-clip",
    "bg-camera-selected",
    "bg-camera-unselected",
    "bg-camera-clip",
    "bg-global_audio-selected",
    "bg-global_audio-unselected",
    "bg-global_audio-clip",
    "bg-object-selected",
    "bg-object-unselected",
    "bg-object-clip",
    "bg-prompt-selected",
    "bg-prompt-unselected",
    "bg-prompt-clip",
    "bg-facebook",
    "bg-reddit",
    "bg-whatsapp",
    "bg-x",
    "bg-email",
  ],
} satisfies Config;