import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    fontSize: {
      'xs': '12px',
      'sm': '14px',    // Design: label-md, mono-data
      'base': '16px',  // Design: body-md
      'lg': '18px',    // Design: body-lg
      'xl': '20px',
      '2xl': '24px',   // Design: headline-sm
      '3xl': '30px',
      '4xl': '32px',   // Design: headline-md
      '5xl': '48px',   // Design: headline-lg
      '6xl': '64px',
    },
    spacing: {
      px: "1px",
      0: "0",
      1: "4px",      // unit
      2: "8px",      // stack-sm
      3: "12px",
      4: "16px",     // stack-md, gutter
      6: "24px",     // container-gap
      8: "32px",     // margin
      12: "48px",
      16: "64px",
      20: "80px",
      24: "96px",
      32: "128px",
    },
    extend: {
      fontFamily: {
        sans: ["'Space Grotesk'", "sans-serif"],
      },
      colors: {
        // Base colors from DESIGN.md
        background: "#131313",
        "on-background": "#e5e2e1",
        foreground: "#e5e2e1",

        // Surface tones from DESIGN.md
        surface: {
          DEFAULT: "#131313",
          dim: "#131313",
          bright: "#3a3939",
          "container-lowest": "#0e0e0e",
          "container-low": "#1c1b1b",
          container: "#201f1f",
          "container-high": "#2a2a2a",
          "container-highest": "#353534",
          variant: "#353534",
        },

        // Primary colors from DESIGN.md
        primary: {
          DEFAULT: "#ffb781",
          foreground: "#4e2600",
          container: "#f58618",
          "on-container": "#5b2d00",
          fixed: "#ffdcc4",
          "fixed-dim": "#ffb781",
          "on-fixed": "#2f1400",
          "on-fixed-variant": "#6f3800",
          inverse: "#924c00",
        },

        // Secondary colors from DESIGN.md
        secondary: {
          DEFAULT: "#c8c6c5",
          foreground: "#303030",
          container: "#474746",
          "on-container": "#b7b5b4",
          fixed: "#e5e2e1",
          "fixed-dim": "#c8c6c5",
          "on-fixed": "#1b1c1c",
          "on-fixed-variant": "#474746",
        },

        // Tertiary colors from DESIGN.md
        tertiary: {
          DEFAULT: "#00e639",
          foreground: "#003907",
          container: "#00bd2d",
          "on-container": "#00440a",
          fixed: "#72ff70",
          "fixed-dim": "#00e639",
          "on-fixed": "#002203",
          "on-fixed-variant": "#00530e",
        },

        // Error colors from DESIGN.md
        error: {
          DEFAULT: "#ffb4ab",
          foreground: "#690005",
          container: "#93000a",
          "on-container": "#ffdad6",
        },

        // Outline colors from DESIGN.md
        outline: "#a48c7c",
        "outline-variant": "#564335",

        // Semantic surface colors (for compatibility)
        muted: {
          DEFAULT: "#474746",
          foreground: "#a48c7c",
        },
        border: {
          DEFAULT: "#353534",
          strong: "#ffb781",
        },
        success: {
          DEFAULT: "#00e639",
          foreground: "#003907",
        },
        warning: "#ffb781",
        info: "#c8c6c5",
      },
      keyframes: {
        scan: {
          '0%, 100%': { top: '0%' },
          '50%': { top: '100%' },
        }
      },
      animation: {
        'scan-fast': 'scan 2.5s ease-in-out infinite',
        'spin-slow': 'spin 3s linear infinite',
      }
    },
  },
  plugins: [],
};
export default config;