/* Khun Clean Elite — Custom Color Utilities for Tailwind 3.x */

/* ===== COLOR VARIABLES ===== */
:root {
  --gold-50: #faf7f0;
  --gold-100: #f2edd9;
  --gold-200: #e6d9b3;
  --gold-300: #d4bf82;
  --gold-400: #c9a96e;
  --gold-500: #b08d57;
  --gold-600: #96743f;
  --gold-700: #7a5c33;
  --gold-800: #63492a;
  --gold-900: #523c23;

  --navy-50: #f5f5f7;
  --navy-100: #e0e0e6;
  --navy-200: #b3b3c2;
  --navy-300: #80809e;
  --navy-400: #4d4d78;
  --navy-500: #2e2e54;
  --navy-600: #1c1c30;
  --navy-700: #161628;
  --navy-800: #111120;
  --navy-900: #0b0b16;

  --surface-50: #fafaf8;
  --surface-100: #f5f0eb;
  --surface-200: #eee8df;
}

/* ===== BACKGROUND ===== */
.bg-gold-300 { background-color: var(--gold-300); }
.bg-gold-400 { background-color: var(--gold-400); }
.bg-gold-500 { background-color: var(--gold-500); }
.bg-navy-600 { background-color: var(--navy-600); }
.bg-surface-50 { background-color: var(--surface-50); }
.bg-surface-100 { background-color: var(--surface-100); }

/* ===== TEXT ===== */
.text-gold-400 { color: var(--gold-400); }
.text-gold-500 { color: var(--gold-500); }
.text-gold-600 { color: var(--gold-600); }
.text-navy-600 { color: var(--navy-600); }

/* ===== BORDER ===== */
.border-gold-400 { border-color: var(--gold-400); }

/* ===== HOVER STATES ===== */
.hover\:bg-gold-300:hover { background-color: var(--gold-300); }
.hover\:bg-gold-400:hover { background-color: var(--gold-400); }
.hover\:bg-navy-600:hover { background-color: var(--navy-600); }
.hover\:text-gold-400:hover { color: var(--gold-400); }
.hover\:text-gold-500:hover { color: var(--gold-500); }
.hover\:text-gold-600:hover { color: var(--gold-600); }
.hover\:text-navy-600:hover { color: var(--navy-600); }

/* ===== GROUP HOVER ===== */
.group:hover .group-hover\:text-gold-500 { color: var(--gold-500); }
.group:hover .group-hover\:text-gold-600 { color: var(--gold-600); }

/* ===== ARBITRARY VALUES (JIT replacements) ===== */

/* Letter spacing */
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }

/* Box shadow */
.hover\:shadow-\[0_4px_20px_rgba\(0\,0\,0\,0\.06\)\]:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Width calc */
@media (min-width: 768px) {
  .md\:w-\[calc\(33\.333\%-1\.34rem\)\] { width: calc(33.333% - 1.34rem); }
}

/* ===== FONT FAMILIES ===== */
.font-serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.font-sans {
  font-family: 'Montserrat', system-ui, sans-serif;
}