/* ==========================================================================
   KJ SUITES DIANI — TYPOGRAPHY & COMPONENT UTILITY CLASSES
   ========================================================================== */

@import './design-tokens.css';

/* --------------------------------------------------------------------------
   Global Reset & Base Canvas Styling
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-obsidian-900);
  background-color: var(--color-cream-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Typography Utility Classes
   -------------------------------------------------------------------------- */
.font-display {
  font-family: var(--font-family-display);
}

.font-body {
  font-family: var(--font-family-body);
}

/* Headings Matrix */
.display-hero {
  font-family: var(--font-family-display);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-navy-700);
}

.heading-1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-navy-700);
}

.heading-2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-navy-700);
}

.heading-3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-navy-700);
}

.heading-4 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-navy-700);
}

/* Body Copy Variants */
.text-body-lg {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-obsidian-700);
}

.text-body-base {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-obsidian-900);
}

.text-body-sm {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-obsidian-500);
}

/* Luxury Overline / Tagline Pill */
.badge-overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-family-body);
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-gold-700);
  background-color: var(--color-gold-100);
  border: 1px solid var(--color-gold-300);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
}

.badge-navy {
  color: var(--color-cream-100);
  background-color: var(--color-navy-700);
  border: none;
}

.badge-palm {
  color: var(--color-palm-800);
  background-color: var(--color-palm-100);
  border: 1px solid rgba(30, 58, 43, 0.2);
}

/* Text Colors */
.text-navy { color: var(--color-navy-700); }
.text-gold { color: var(--color-gold-500); }
.text-gold-dark { color: var(--color-gold-700); }
.text-cream { color: var(--color-cream-100); }
.text-muted { color: var(--color-obsidian-500); }

/* --------------------------------------------------------------------------
   Luxury Button & Action Components
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  padding: 0.9rem 2rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-smooth);
  touch-action: manipulation;
}

/* Tactile Press Feedback (RULE-503) */
.btn:active,
.tab-btn:active,
.currency-btn:active,
.drawer-close-btn:active,
.modal-close:active {
  transform: translateY(1px) scale(0.98) !important;
}

.btn-primary {
  background-color: var(--color-navy-700);
  color: var(--color-cream-100);
  box-shadow: var(--shadow-medium);
}

.btn-gold {
  background-color: var(--color-gold-500);
  color: var(--color-navy-900);
  box-shadow: var(--shadow-gold-glow);
}

.btn-outline-navy {
  background-color: transparent;
  color: var(--color-navy-700);
  border-color: var(--color-navy-700);
}

.btn-outline-gold {
  background-color: transparent;
  color: var(--color-gold-500);
  border-color: var(--color-gold-500);
}

/* Scoped Desktop Hover States - Sticky Hover Prevention (RULE-303) */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background-color: var(--color-navy-900);
    transform: translateY(-2px);
    box-shadow: var(--shadow-luxury);
  }

  .btn-gold:hover {
    background-color: var(--color-gold-400);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(200, 180, 144, 0.4);
  }

  .btn-outline-navy:hover {
    background-color: var(--color-navy-700);
    color: var(--color-cream-100);
  }

  .btn-outline-gold:hover {
    background-color: var(--color-gold-500);
    color: var(--color-navy-900);
  }

  .card-luxury:hover {
    box-shadow: var(--shadow-medium);
    border-color: var(--color-gold-300);
    transform: translateY(-3px);
  }
}

.card-navy {
  background-color: var(--color-navy-900);
  color: var(--color-cream-100);
  border: 1px solid rgba(200, 180, 144, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-luxury);
}

.card-linen {
  background-color: var(--color-cream-200);
  border: 1px solid var(--color-cream-300);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}