// tailwind.config.ts
const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      colors: {
        graphite: {
          bg: "#050505",             // main background
          card: "#0B0B0B",           // card background
          border: "rgba(255,255,255,0.08)",  // border
          soft: "rgba(255,255,255,0.05)",     // subtle overlay
        },
      },
      boxShadow: {
        graphite: "0 24px 80px rgba(0,0,0,0.45)",
      },
    },
  },
  plugins: [],
};

/* 1) Body background — รูปพื้นหลังแบบ luxury */
body {
  background:
    linear-gradient(180deg, rgba(5,5,5,0.82), rgba(5,5,5,0.94)),
    url("/images/home/mimo-luxury-hero.jpg") center top / cover fixed no-repeat,
    #050505;
}

/* 2) Ambient gold light + grid scanline */
body::before {
  background-image:
    linear-gradient(135deg, rgba(245,184,49,0.1), transparent 18%, transparent 82%, rgba(245,184,49,0.08)),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.018) 0,
      rgba(255,255,255,0.018) 1px,
      transparent 1px,
      transparent 4px);
  mix-blend-mode: screen;
  opacity: 0.22;
}

/* 3) Radial gold spots + gradient overlay */
body::after {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(245,184,49,0.18), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(245,184,49,0.16), transparent 16%),
    linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,0.035) 58.1%, transparent 58.35%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.5) 340px, rgba(0,0,0,0.72));
}

/* 4) Grid pattern สำหรับ section */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 44px 44px;
}