import type { Config } from "tailwindcss";

// Bridges Tailwind utilities to the OKLCH custom-property tokens defined in
// src/styles.css. Every value here is `var(--token)`, never a literal, so
// theme/palette switching (data-theme, data-palette on <html>) keeps working
// through Tailwind classes exactly as it does through the vanilla CSS.
export default {
  content: ["src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        bg: "var(--bg)",
        "bg-grid": "var(--bg-grid)",
        surface: "var(--surface)",
        "surface-2": "var(--surface-2)",
        "surface-3": "var(--surface-3)",
        border: "var(--border)",
        "border-strong": "var(--border-strong)",

        ink: "var(--ink)",
        muted: "var(--muted)",
        faint: "var(--faint)",

        accent: "var(--accent)",
        "accent-strong": "var(--accent-strong)",
        "accent-ink": "var(--accent-ink)",
        "accent-tint": "var(--accent-tint)",
        "accent-ring": "var(--accent-ring)",
        "accent-fill": "var(--accent-fill)",

        preview: "var(--preview)",
        "preview-ink": "var(--preview-ink)",
        "preview-tint": "var(--preview-tint)",
        "preview-ring": "var(--preview-ring)",

        live: "var(--live)",
        "live-glow": "var(--live-glow)",
        danger: "var(--danger)",
        "danger-tint": "var(--danger-tint)",
        warn: "var(--warn)",

        "term-bg": "var(--term-bg)",
      },
      spacing: {
        "sp-1": "var(--sp-1)",
        "sp-2": "var(--sp-2)",
        "sp-3": "var(--sp-3)",
        "sp-4": "var(--sp-4)",
        "sp-5": "var(--sp-5)",
        "sp-6": "var(--sp-6)",
        "sp-8": "var(--sp-8)",
      },
      borderRadius: {
        "r-1": "var(--r-1)",
        "r-2": "var(--r-2)",
        "r-3": "var(--r-3)",
        "r-pill": "var(--r-pill)",
      },
      fontSize: {
        "fs-11": "var(--fs-11)",
        "fs-12": "var(--fs-12)",
        "fs-13": "var(--fs-13)",
        "fs-14": "var(--fs-14)",
        "fs-15": "var(--fs-15)",
        "fs-17": "var(--fs-17)",
        "fs-20": "var(--fs-20)",
      },
      fontFamily: {
        mono: "var(--font-mono)",
        sans: "var(--font-sans)",
      },
      height: {
        "row-h": "var(--row-h)",
        "control-h": "var(--control-h)",
        tap: "var(--tap)",
        "bar-h": "var(--bar-h)",
      },
      width: {
        tap: "var(--tap)",
      },
      minHeight: {
        "control-h": "var(--control-h)",
        tap: "var(--tap)",
      },
      zIndex: {
        sticky: "var(--z-sticky)",
        backdrop: "var(--z-backdrop)",
        modal: "var(--z-modal)",
        toast: "var(--z-toast)",
      },
      transitionDuration: {
        fast: "var(--dur-fast)",
        DEFAULT: "var(--dur)",
        slow: "var(--dur-slow)",
      },
      transitionTimingFunction: {
        out: "var(--ease-out)",
      },
      boxShadow: {
        1: "var(--shadow-1)",
        2: "var(--shadow-2)",
      },
    },
  },
} satisfies Config;