import type { Config } from "tailwindcss";
import forms from "@tailwindcss/forms";
import containerQueries from "@tailwindcss/container-queries";

// Tokens ported verbatim from design-samples/stitch_jasonwoltje.com/*/code.html
// Full token rationale in design-samples/stitch_jasonwoltje.com/silicon_ethos/DESIGN.md
const stitchColors = {
  primary: "#81ecff",
  "primary-dim": "#00d4ec",
  "primary-fixed": "#00e3fd",
  "primary-fixed-dim": "#00d4ec",
  "primary-container": "#00e3fd",
  "on-primary": "#005762",
  "on-primary-container": "#004d57",
  "on-primary-fixed": "#003840",
  "on-primary-fixed-variant": "#005762",

  secondary: "#d873ff",
  "secondary-dim": "#bc00fb",
  "secondary-fixed": "#f1c1ff",
  "secondary-fixed-dim": "#ebadff",
  "secondary-container": "#9900ce",
  "on-secondary": "#39004f",
  "on-secondary-container": "#fff5fc",
  "on-secondary-fixed": "#580078",
  "on-secondary-fixed-variant": "#8400b2",

  tertiary: "#8eff71",
  "tertiary-dim": "#2be800",
  "tertiary-fixed": "#2ff801",
  "tertiary-fixed-dim": "#2be800",
  "tertiary-container": "#2ff801",
  "on-tertiary": "#0d6100",
  "on-tertiary-container": "#0b5800",
  "on-tertiary-fixed": "#064200",
  "on-tertiary-fixed-variant": "#0d6200",

  error: "#ff716c",
  "error-dim": "#d7383b",
  "error-container": "#9f0519",
  "on-error": "#490006",
  "on-error-container": "#ffa8a3",

  background: "#0d0e12",
  "on-background": "#f7f5fc",

  surface: "#0d0e12",
  "surface-dim": "#0d0e12",
  "surface-bright": "#2a2c32",
  "surface-variant": "#24252c",
  "surface-tint": "#81ecff",
  "surface-container-lowest": "#000000",
  "surface-container-low": "#121318",
  "surface-container": "#18191e",
  "surface-container-high": "#1e1f25",
  "surface-container-highest": "#24252c",
  "on-surface": "#f7f5fc",
  "on-surface-variant": "#abaab0",

  "inverse-surface": "#faf8ff",
  "inverse-on-surface": "#54555a",
  "inverse-primary": "#006976",

  outline: "#75757a",
  "outline-variant": "#47484d",
};

const config: Config = {
  darkMode: "class",
  content: ["./src/**/*.{ts,tsx,mdx}"],
  theme: {
    extend: {
      colors: stitchColors,
      borderRadius: {
        DEFAULT: "0.125rem",
        sm: "0.125rem",
        md: "0.375rem",
        lg: "0.25rem",
        xl: "0.5rem",
        "2xl": "0.75rem",
        full: "9999px",
      },
      fontFamily: {
        headline: ["var(--font-headline)", "Space Grotesk", "sans-serif"],
        body: ["var(--font-body)", "Inter", "sans-serif"],
        label: ["var(--font-label)", "Space Grotesk", "monospace"],
      },
      boxShadow: {
        "neon-primary":
          "0 0 32px 4px rgba(129, 236, 255, 0.25), 0 0 4px 1px rgba(129, 236, 255, 0.5)",
        "neon-secondary":
          "0 0 32px 4px rgba(216, 115, 255, 0.25), 0 0 4px 1px rgba(216, 115, 255, 0.5)",
      },
      backdropBlur: {
        "2xl": "24px",
      },
    },
  },
  plugins: [forms, containerQueries],
};

export default config;