tailwind.config.ts

import type { Config } from "tailwindcss";

/**
 * Etiya doc-to-lora — Twilight Atelier design tokens.
 *
 * Aesthetic: A research notebook at dusk. Deep indigo canvas warmed by a
 * single luminous amber, atmospheric aurora behind glass surfaces, editorial
 * serif italics carrying display moments. Sober enough for enterprise BSS,
 * soulful enough to belong in an AI atelier.
 */
const config: Config = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./lib/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // ── Canvas (deep indigo-charcoal with warmth)
        canvas: {
          DEFAULT: "#0a0b10",
          deep: "#06070a",
          1: "#0e0f17",
          2: "#14151f",
          3: "#1c1d29",
          4: "#262735",
        },
        // ── Glass / overlay
        glass: {
          DEFAULT: "rgba(255, 255, 255, 0.04)",
          stronger: "rgba(255, 255, 255, 0.07)",
          border: "rgba(255, 255, 255, 0.10)",
          "border-strong": "rgba(255, 255, 255, 0.16)",
        },
        // ── Ink (warm off-white text — never pure white)
        ink: {
          DEFAULT: "#f5f3ec",
          90: "rgba(245, 243, 236, 0.90)",
          70: "rgba(245, 243, 236, 0.65)",
          50: "rgba(245, 243, 236, 0.46)",
          30: "rgba(245, 243, 236, 0.28)",
          15: "rgba(245, 243, 236, 0.14)",
        },
        // ── Single luminous accent (warm amber)
        amber: {
          DEFAULT: "#ffb545",
          soft: "#ffd599",
          deep: "#d68a1f",
          glow: "rgba(255, 181, 69, 0.18)",
          ring: "rgba(255, 181, 69, 0.45)",
        },
        // ── Status (warm-tuned, never primary brand colors)
        status: {
          ok: "#5dd6a8",
          "ok-glow": "rgba(93, 214, 168, 0.16)",
          warn: "#ffb545",
          "warn-glow": "rgba(255, 181, 69, 0.16)",
          err: "#ff7a7a",
          "err-glow": "rgba(255, 122, 122, 0.16)",
        },
      },
      fontFamily: {
        // Editorial italic display (Google Font: Instrument Serif)
        serif: ["var(--font-instrument)", "ui-serif", "Georgia", "serif"],
        // UI / body (Manrope — modern, geometric, warmer than Inter)
        sans: ["var(--font-manrope)", "system-ui", "-apple-system", "sans-serif"],
        // Spec-sheet readouts
        mono: ["var(--font-mono)", "ui-monospace", "SF Mono", "Menlo", "monospace"],
      },
      fontSize: {
        // Atelier display ladder — generous, with -0.02em tracking
        "display-2xl": ["88px", { lineHeight: "0.95", letterSpacing: "-0.04em", fontWeight: "500" }],
        "display-xl": ["64px", { lineHeight: "1.0", letterSpacing: "-0.035em", fontWeight: "500" }],
        "display-lg": ["44px", { lineHeight: "1.05", letterSpacing: "-0.025em", fontWeight: "600" }],
        "display-md": ["32px", { lineHeight: "1.12", letterSpacing: "-0.02em", fontWeight: "600" }],
        "display-sm": ["24px", { lineHeight: "1.2", letterSpacing: "-0.015em", fontWeight: "600" }],
        // Body
        lead: ["20px", { lineHeight: "1.5", letterSpacing: "-0.005em", fontWeight: "400" }],
        body: ["15px", { lineHeight: "1.6", letterSpacing: "0", fontWeight: "400" }],
        "body-strong": ["15px", { lineHeight: "1.6", letterSpacing: "0", fontWeight: "600" }],
        caption: ["13px", { lineHeight: "1.5", letterSpacing: "0", fontWeight: "400" }],
        "caption-strong": ["13px", { lineHeight: "1.4", letterSpacing: "0.005em", fontWeight: "600" }],
        micro: ["11px", { lineHeight: "1.4", letterSpacing: "0.05em", fontWeight: "500" }],
      },
      spacing: {
        section: "96px",
      },
      borderRadius: {
        none: "0",
        xs: "6px",
        sm: "10px",
        DEFAULT: "12px",
        md: "14px",
        lg: "20px",
        xl: "28px",
        "2xl": "36px",
        pill: "9999px",
      },
      boxShadow: {
        // The single sanctioned card glow — for elevated surfaces
        glass:
          "0 1px 0 rgba(255,255,255,0.05) inset, 0 0 0 1px rgba(255,255,255,0.08), 0 16px 40px -16px rgba(0,0,0,0.6)",
        "glass-lg":
          "0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(255,255,255,0.10), 0 28px 80px -24px rgba(0,0,0,0.7)",
        // Amber accent glow for active CTAs
        amber:
          "0 0 0 1px rgba(255,181,69,0.42), 0 0 32px -8px rgba(255,181,69,0.45)",
        // Hairline ring (replaces border-1 for crisp edges on glass)
        hairline: "0 0 0 1px rgba(255,255,255,0.08)",
        "hairline-strong": "0 0 0 1px rgba(255,255,255,0.16)",
      },
      backdropBlur: {
        glass: "16px",
        nav: "24px",
      },
      transitionTimingFunction: {
        // Smooth deceleration — feels like Apple's spring
        atelier: "cubic-bezier(0.32, 0.72, 0, 1)",
        "out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
      },
      animation: {
        "fade-in": "fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
        "fade-up": "fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
        "fade-up-slow": "fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1)",
        "stagger-1": "fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both",
        "stagger-2": "fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both",
        "stagger-3": "fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both",
        "stagger-4": "fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both",
        shimmer: "shimmer 2.4s ease-in-out infinite",
        "pulse-soft": "pulseSoft 2.4s ease-in-out infinite",
        "aurora-1": "aurora1 22s ease-in-out infinite alternate",
        "aurora-2": "aurora2 28s ease-in-out infinite alternate",
        "thinking-dot": "thinkingDot 1.4s ease-in-out infinite",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        fadeUp: {
          "0%": { opacity: "0", transform: "translateY(12px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        shimmer: {
          "0%, 100%": { opacity: "0.4" },
          "50%": { opacity: "0.85" },
        },
        pulseSoft: {
          "0%, 100%": { opacity: "0.7", transform: "scale(1)" },
          "50%": { opacity: "1", transform: "scale(1.04)" },
        },
        aurora1: {
          "0%": { transform: "translate(-10%, -8%) scale(1)" },
          "100%": { transform: "translate(8%, 10%) scale(1.15)" },
        },
        aurora2: {
          "0%": { transform: "translate(8%, 10%) scale(1.1)" },
          "100%": { transform: "translate(-6%, -4%) scale(1)" },
        },
        thinkingDot: {
          "0%, 80%, 100%": { opacity: "0.25", transform: "translateY(0)" },
          "40%": { opacity: "1", transform: "translateY(-3px)" },
        },
      },
    },
  },
  plugins: [],
};
export default config;