import type { Config } from "tailwindcss";

/**
 * EDITORIAL DESIGN SYSTEM — "Issue 01"
 * ------------------------------------------------------------------
 * High-contrast, magazine-spread aesthetic. The whole site re-themes
 * from the tokens below.
 *
 * CUSTOMIZATION HOOK — COLOR PALETTE
 *   ink        → near-black, all primary type & rules
 *   ivory      → warm paper background
 *   paper      → slightly dimmer paper for cards / insets
 *   vermillion → Agent Engineering / Orchestration accent (hot)
 *   cobalt     → MCP / A2A Protocol accent (cool)
 * Swap any hex and the entire editorial system follows.
 *
 * CUSTOMIZATION HOOK — FONTS
 *   font-display  → Fraunces (English serif, magazine-cover scale)
 *   font-serif-ko → Noto Serif KR (Korean serif headlines)
 *   font-sans     → Pretendard / Inter (clean body)
 * Font CSS variables are injected by next/font in app/layout.tsx.
 */
const config: Config = {
  darkMode: ["class", '[data-theme="dark"]'],
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      screens: {
        desktop: "1240px",
      },
      colors: {
        ink: {
          DEFAULT: "rgb(var(--ink-rgb) / <alpha-value>)",
          soft: "rgb(var(--ink-soft-rgb) / <alpha-value>)",
          mute: "rgb(var(--ink-mute-rgb) / <alpha-value>)",
        },
        ivory: "rgb(var(--ivory-rgb) / <alpha-value>)",
        paper: "rgb(var(--paper-rgb) / <alpha-value>)",
        line: "rgb(var(--line-rgb) / <alpha-value>)",
        vermillion: {
          DEFAULT: "rgb(var(--vermillion-rgb) / <alpha-value>)",
          dark: "rgb(var(--vermillion-dark-rgb) / <alpha-value>)",
        },
        cobalt: {
          DEFAULT: "rgb(var(--cobalt-rgb) / <alpha-value>)",
          dark: "rgb(var(--cobalt-dark-rgb) / <alpha-value>)",
        },
        // Back-compat aliases so any stray legacy class still resolves.
        brand: {
          DEFAULT: "rgb(var(--vermillion-rgb) / <alpha-value>)",
          dark: "rgb(var(--vermillion-dark-rgb) / <alpha-value>)",
          light: "rgb(var(--cobalt-rgb) / <alpha-value>)",
        },
        accent: { DEFAULT: "rgb(var(--cobalt-rgb) / <alpha-value>)" },
      },
      fontFamily: {
        // English display serif — magazine cover scale.
        display: ["var(--font-display)", "Fraunces", "Georgia", "serif"],
        // Korean serif headlines.
        "serif-ko": ["var(--font-serif-ko)", "Noto Serif KR", "serif"],
        // Clean sans body. Geist preferred, Pretendard & Inter as web fallbacks.
        sans: [
          "Geist",
          "var(--font-sans)",
          "Pretendard",
          "Inter",
          "ui-sans-serif",
          "system-ui",
          "sans-serif",
        ],
        mono: [
          "Geist Mono",
          "var(--font-mono)",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "Monaco",
          "Consolas",
          "monospace",
        ],
      },
      fontSize: {
        // Magazine-cover display scale. Capped at 7rem (was 9rem) so the
        // longest single word ("Standards" on /intro col-span-7) does not
        // overflow the column at 1280+ viewports. See LAYOUT_AUDIT #7.
        display: ["clamp(2.75rem, 9vw, 7rem)", { lineHeight: "0.95", letterSpacing: "-0.02em" }],
        "display-sm": ["clamp(2rem, 5.5vw, 3.75rem)", { lineHeight: "1.02", letterSpacing: "-0.01em" }],
      },
      maxWidth: {
        content: "78rem",
        prose: "44rem",
      },
      letterSpacing: {
        caps: "0.28em",
      },
      keyframes: {
        marquee: {
          "0%": { transform: "translateX(0)" },
          "100%": { transform: "translateX(-50%)" },
        },
        "marquee-reverse": {
          "0%": { transform: "translateX(-50%)" },
          "100%": { transform: "translateX(0)" },
        },
        "stream-dash": {
          to: { strokeDashoffset: "-1000" },
        },
        "node-pulse": {
          "0%, 100%": { opacity: "0.35", transform: "scale(1)" },
          "50%": { opacity: "1", transform: "scale(1.12)" },
        },
      },
      animation: {
        // CUSTOMIZATION HOOK — MOTION: tune marquee speed here.
        marquee: "marquee 32s linear infinite",
        "marquee-slow": "marquee 60s linear infinite",
        "marquee-reverse": "marquee-reverse 45s linear infinite",
        "stream-dash": "stream-dash 6s linear infinite",
        "node-pulse": "node-pulse 4s ease-in-out infinite",
      },
    },
  },
  plugins: [],
};

export default config;