import type { Config } from "tailwindcss";

/** Wraps a channel-triple CSS custom property (e.g. "138 106 52") so Tailwind can inject alpha for opacity modifiers. */
function withOpacity(variable: string) {
  return `rgb(var(${variable}) / <alpha-value>)`;
}

const config: Config = {
  darkMode: ["class", '[data-theme="dark"]'],
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./design-system/**/*.{ts,tsx}",
  ],
  theme: {
    // Overridden (not extended) — the brand does not use Tailwind's default scale.
    screens: {
      sm: "480px", // Mobile (large)
      md: "768px", // Tablet
      lg: "1024px", // Laptop
      xl: "1280px", // Desktop
      "2xl": "1536px", // Large screen
      "3xl": "1920px", // Ultra-wide
    },
    container: {
      center: true,
      padding: {
        DEFAULT: "1.25rem",
        sm: "2rem",
        lg: "3rem",
        xl: "4rem",
        "2xl": "5rem",
      },
      screens: {
        sm: "480px",
        md: "768px",
        lg: "1024px",
        xl: "1200px",
        "2xl": "1360px",
        "3xl": "1560px",
      },
    },
    extend: {
      colors: {
        // Channel-triple custom properties (e.g. "138 106 52") wrapped so Tailwind's
        // opacity modifiers (bg-primary/20) work — see styles/tokens.css.
        bg: withOpacity("--color-bg"),
        paper: withOpacity("--color-paper"),
        tint: withOpacity("--color-tint"),
        "tag-bg": withOpacity("--color-tag-bg"),
        line: withOpacity("--color-line"),
        "line-strong": withOpacity("--color-line-strong"),

        ink: {
          DEFAULT: withOpacity("--color-ink"),
          soft: withOpacity("--color-ink-soft"),
        },
        slate: {
          DEFAULT: withOpacity("--color-slate"),
          muted: withOpacity("--color-slate-muted"),
        },

        primary: {
          DEFAULT: withOpacity("--color-primary"),
          soft: withOpacity("--color-primary-soft"),
          strong: withOpacity("--color-primary-strong"),
          contrast: withOpacity("--color-primary-contrast"),
        },
        secondary: {
          DEFAULT: withOpacity("--color-secondary"),
          soft: withOpacity("--color-secondary-soft"),
          contrast: withOpacity("--color-secondary-contrast"),
        },
        accent: {
          DEFAULT: withOpacity("--color-accent"),
          soft: withOpacity("--color-accent-soft"),
          contrast: withOpacity("--color-accent-contrast"),
        },

        success: { DEFAULT: withOpacity("--color-success"), bg: withOpacity("--color-success-bg") },
        warning: { DEFAULT: withOpacity("--color-warning"), bg: withOpacity("--color-warning-bg") },
        error: { DEFAULT: withOpacity("--color-error"), bg: withOpacity("--color-error-bg") },
        info: { DEFAULT: withOpacity("--color-info"), bg: withOpacity("--color-info-bg") },

        // Footer is always deep navy, independent of the light/dark theme toggle.
        footer: {
          bg: withOpacity("--color-footer-bg"),
          line: withOpacity("--color-footer-line"),
          heading: withOpacity("--color-footer-heading"),
          ink: withOpacity("--color-footer-ink"),
          muted: withOpacity("--color-footer-muted"),
          "link-hover": withOpacity("--color-footer-link-hover"),
        },
      },
      fontFamily: {
        display: ["var(--font-display)", "Palatino", "Georgia", "serif"],
        sans: ["var(--font-sans)", "-apple-system", "Segoe UI", "Helvetica", "Arial", "sans-serif"],
        mono: ["var(--font-mono)", "IBM Plex Mono", "Courier New", "monospace"],
      },
      fontSize: {
        // Display scale — editorial, headline moments only
        "display-xl": ["4.5rem", { lineHeight: "1.05", letterSpacing: "-0.015em" }],
        "display-lg": ["3.5rem", { lineHeight: "1.08", letterSpacing: "-0.015em" }],
        "display-md": ["2.75rem", { lineHeight: "1.1", letterSpacing: "-0.01em" }],
        // Heading scale
        "h1": ["2.25rem", { lineHeight: "1.15", letterSpacing: "-0.01em" }],
        "h2": ["1.75rem", { lineHeight: "1.2", letterSpacing: "-0.005em" }],
        "h3": ["1.375rem", { lineHeight: "1.3" }],
        "h4": ["1.125rem", { lineHeight: "1.4" }],
        // Paragraph scale
        "body-lg": ["1.125rem", { lineHeight: "1.7" }],
        "body-md": ["1rem", { lineHeight: "1.65" }],
        "body-sm": ["0.875rem", { lineHeight: "1.6" }],
        // Caption / label
        "caption": ["0.8125rem", { lineHeight: "1.5" }],
        "label": ["0.75rem", { lineHeight: "1.4", letterSpacing: "0.06em" }],
      },
      spacing: {
        "18": "4.5rem",
        "22": "5.5rem",
        "30": "7.5rem",
      },
      borderRadius: {
        none: "0",
        sm: "2px",
        DEFAULT: "4px",
        md: "6px",
        lg: "10px",
        xl: "16px",
        full: "9999px",
      },
      boxShadow: {
        1: "var(--shadow-1)",
        2: "var(--shadow-2)",
        3: "var(--shadow-3)",
        4: "var(--shadow-4)",
      },
      gridTemplateColumns: {
        12: "repeat(12, minmax(0, 1fr))",
      },
      transitionTimingFunction: {
        editorial: "cubic-bezier(0.22, 1, 0.36, 1)",
      },
      transitionDuration: {
        150: "150ms",
        200: "200ms",
        250: "250ms",
        400: "400ms",
      },
      keyframes: {
        "fade-up": {
          "0%": { opacity: "0", transform: "translateY(8px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        "skeleton-pulse": {
          "0%, 100%": { opacity: "0.55" },
          "50%": { opacity: "1" },
        },
        spin: {
          to: { transform: "rotate(360deg)" },
        },
      },
      animation: {
        "fade-up": "fade-up 400ms cubic-bezier(0.22, 1, 0.36, 1) both",
        "skeleton-pulse": "skeleton-pulse 1.6s ease-in-out infinite",
        spin: "spin 900ms linear infinite",
      },
    },
  },
  plugins: [],
};

export default config;