@theme {
  /* Dipakai Tailwind */
  --color-main-bg: var(--bg);
  --color-main-text: var(--text);
  --color-main-border: var(--border);
  --color-main-bg-soft: var(--bg-secondary);

  --color-primary-brown: var(--primary-brown);
  --color-accent-orange: var(--accent-orange);
}

@layer base {
  :root {
    /* ================= WARNA POSTER ================= */
    --primary-brown: #6b3e26;
    --accent-orange: #d17842;
    --accent-red: #c62828;

    --bg-cream: #f4e4bc;
    --bg-light-cream: #faf3e0;

    /* ================= LIGHT MODE ================= */
    --bg-light: var(--bg-cream);
    --bg-secondary-light: var(--bg-light-cream);
    --text-light: #3e2723;
    --text-secondary-light: #5d4037;
    --border-light: #d7ccc8;

    /* ================= DARK MODE ================= */
    --bg-dark: #1a1512;
    --bg-secondary-dark: #2a221d;
    --text-dark: #f5f5f5;
    --text-secondary-dark: #b8b8b8;
    --border-dark: #40352f;

    /* ================= DEFAULT MODE (DARK) ================= */
    --bg: var(--bg-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --text: var(--text-dark);
    --text-secondary: var(--text-secondary-dark);
    --border: var(--border-dark);

    --home-grad: rgba(0, 0, 0, 0.7);

    /* mapping warna lama supaya layout lama aman */
    --primary-green: var(--primary-brown);
    --accent-cream: #f5e6d3;
  }

  /* ================= LIGHT MODE ================= */
  body.light-mode {
    --bg: var(--bg-light);
    --bg-secondary: var(--bg-secondary-light);
    --text: var(--text-light);
    --text-secondary: var(--text-secondary-light);
    --border: var(--border-light);

    --home-grad: rgba(255, 255, 255, 0.6);
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    transition:
      background-color 0.3s,
      color 0.3s,
      border-color 0.3s;
  }

  .bg-main-bg {
    background-color: var(--bg);
  }

  .bg-main-bg-soft {
    background-color: var(--bg-secondary);
  }

  .text-main-text {
    color: var(--text);
  }

  .border-main-border {
    border-color: var(--border);
  }

  /* ===== NAV LINK ANIMATION ===== */
  .nav-link {
    position: relative;
    color: var(--text);
    width: fit-content;
    display: block;
    transition: color 0.3s;
  }

  .nav-link:hover {
    color: var(--accent-orange);
  }

  /* garis bawah animasi */
  .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--accent-orange);
    transition: width 0.3s ease;
    transform: translateX(-50%);
  }

  .nav-link:hover::after {
    width: 100%;
  }

  .nav-link.active {
    color: var(--accent-orange);
  }

  .nav-link.active::after {
    width: 100%;
  }

  .about-image {
    -webkit-mask: url('../images/coffe-beans-splash-1.svg') center / contain
      no-repeat;
    mask: url('../images/coffe-beans-splash-1.svg') center / contain no-repeat;

    background-color: rgba(0, 0, 0, 0.7); /* penting untuk mask */
  }

  /* Styling Scrollbar agar lebih tipis & aestetic */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(var(--main-text), 0.1);
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #f97316; /* Warna orange */
  }

  /* Menambahkan animasi spin yang lebih halus/lambat agar tidak pusing */
  .animate-spin-slow {
    animation: spin 3s linear infinite;
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}