@import "tailwindcss";

@theme {
  /* ── Dark monokrom palette (replika Portfolite) — tema bawaan ── */
  --color-ink: #0a0a0a; /* background utama */
  --color-surface: #111214; /* kartu / panel */
  --color-surface-2: #17181b; /* kartu hover / panel naik */
  --color-fog: #b0b5b5; /* teks sekunder */
  --color-mist: #7a8080; /* teks tersier / label */
  --color-line: #ffffff14; /* border putih 8% */
  --color-line-2: #ffffff24; /* border putih 14% */

  /* ── Token semantik (di-override html.light) ── */
  --color-fg: #ffffff; /* teks utama / judul */
  --color-cta: #ffffff; /* latar tombol CTA utama */
  --color-cta-ink: #0a0a0a; /* teks tombol CTA utama */
  --color-accent: #85df1d; /* highlight / aksen (brand) */
  --color-panel: rgba(255, 255, 255, 0.04); /* isian panel halus */
  --color-panel-strong: rgba(255, 255, 255, 0.08);
}

@theme inline {
  --font-sans: var(--font-jakarta), ui-sans-serif, system-ui, sans-serif;
  --font-accent: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
}

/* ── Tema terang: cukup override token di html.light ── */
html.light {
  --color-ink: #f6f7f7;
  --color-surface: #ffffff;
  --color-surface-2: #eceff0;
  --color-fog: #3f4549;
  --color-mist: #697075;
  --color-line: #10131514;
  --color-line-2: #10131526;
  --color-fg: #101315;
  --color-cta: #101315;
  --color-cta-ink: #ffffff;
  --color-accent: #4e9c0b;
  --color-panel: rgba(16, 19, 21, 0.04);
  --color-panel-strong: rgba(16, 19, 21, 0.07);
}

html {
  scroll-behavior: initial; /* Lenis yang mengatur smooth scroll */
}

body {
  background: var(--color-ink);
  color: var(--color-fg);
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

::selection {
  background: var(--color-fg);
  color: var(--color-ink);
}

/* ── Scrollbar tipis ── */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-ink);
}
::-webkit-scrollbar-thumb {
  background: var(--color-surface-2);
  border-radius: 999px;
  border: 2px solid var(--color-ink);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-mist);
}

/* ── Marquee logo klien ── */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  animation: marquee 32s linear infinite;
}
.marquee-mask {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 12%,
    black 88%,
    transparent
  );
}

/* ── Glow border khas pill button ── */
.glow-border {
  border: 1px solid var(--color-line-2);
  box-shadow:
    0 0 28px rgba(255, 255, 255, 0.05),
    inset 0 0 14px rgba(255, 255, 255, 0.03);
}
.glow-border:hover {
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 0 36px rgba(255, 255, 255, 0.09),
    inset 0 0 14px rgba(255, 255, 255, 0.05);
}
html.light .glow-border {
  box-shadow:
    0 0 28px rgba(16, 19, 21, 0.05),
    inset 0 0 14px rgba(16, 19, 21, 0.02);
}
html.light .glow-border:hover {
  border-color: rgba(16, 19, 21, 0.35);
  box-shadow:
    0 0 36px rgba(16, 19, 21, 0.1),
    inset 0 0 14px rgba(16, 19, 21, 0.04);
}

/* Glow untuk tombol CTA utama */
.cta-glow:hover {
  box-shadow: 0 0 36px color-mix(in srgb, var(--color-cta) 30%, transparent);
}

/* ── Tekstur fluida grayscale (pengganti gambar smoke asli) ── */
.fluid-bg {
  background:
    radial-gradient(
      42rem 42rem at 18% 12%,
      rgba(120, 128, 128, 0.14),
      transparent 60%
    ),
    radial-gradient(
      38rem 38rem at 85% 8%,
      rgba(90, 96, 96, 0.12),
      transparent 60%
    ),
    radial-gradient(
      46rem 46rem at 55% 95%,
      rgba(140, 148, 148, 0.1),
      transparent 65%
    );
}
html.light .fluid-bg {
  background:
    radial-gradient(
      42rem 42rem at 18% 12%,
      rgba(120, 128, 128, 0.18),
      transparent 60%
    ),
    radial-gradient(
      38rem 38rem at 85% 8%,
      rgba(255, 255, 255, 0.7),
      transparent 60%
    ),
    radial-gradient(
      46rem 46rem at 55% 95%,
      rgba(140, 148, 148, 0.14),
      transparent 65%
    );
}

/* ── Pola titik halus untuk kartu gambar ── */
.dot-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 14px 14px;
}
html.light .dot-pattern {
  background-image: radial-gradient(rgba(16, 19, 21, 0.08) 1px, transparent 1px);
}

/* ── Shader animasi latar: diredupkan pada tema terang ── */
html.light .bg-anim {
  opacity: 0.18;
}

/* ── Halo pemisah logo klien: mengikuti warna tema agar logo gelap
      tetap terlihat di latar gelap (dan sebaliknya) tanpa kotak putih ── */
.logo-sep {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--color-fg) 70%, transparent));
}