/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        bg: "var(--bg)",
        surface: "var(--surface)",
        card: "var(--card)",
        border: "var(--border)",
        fg: "var(--fg)",
        muted: "var(--muted)",
        accent: "var(--accent)",
        "accent-fg": "var(--accent-fg)",
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "-apple-system", "Segoe UI", "Roboto", "sans-serif"],
      },
      // Named z-index layers — the single source of truth for stacking order. Values are
      // deliberately UNCHANGED from the magic numbers they replaced (this was a rename, not a
      // renumber), so the visual layering is identical; the names just make the stack legible and
      // give future changes one place to edit. Low → high:
      //   base(10)   in-content decorations: sticky table head, card badges, in-flow dropdowns
      //   menu(20)   menus/overlays sitting just over content
      //   chrome(30) floating chrome: the header band, back-to-top, content filter/sort menus
      //   paneltab / panel (34/35) the collapsed tab vs the expanded side panel (aside over tab)
      //   rail(40)   full-height rails + docked bars: nav rail, chat dock, floating save bar
      //   overlay(50) full-screen modals/players, toaster, onboarding, popovers over content
      //   popover(60) a popover that must sit over an overlay (player scrub, tag menu) + the login gate
      //   tooltip(100) tooltips, above everything interactive
      //   tuner(9999)  the dev/lab glass tuner, deliberately on top of all
      zIndex: {
        base: "10",
        menu: "20",
        chrome: "30",
        paneltab: "34",
        panel: "35",
        rail: "40",
        overlay: "50",
        popover: "60",
        tooltip: "100",
        tuner: "9999",
      },
    },
  },
  plugins: [],
};