/* ============================================
   GEOMETRIC PLAY DESIGN SYSTEM
   Custom CSS (loaded separately from Tailwind)
   ============================================ */

/* ============================================
   DYNAMIC VIEWPORT HEIGHT
   Fixes mobile browser chrome (URL bar) issue
   ============================================ */

/* Fallback for browsers without dvh support */
:root {
  --app-height: 100vh;
}

/* Use dynamic viewport height where supported */
@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

/* Utility class for app height */
.h-app {
  height: 100vh;
  height: var(--app-height);
}

.min-h-app {
  min-height: 100vh;
  min-height: var(--app-height);
}

/* CSS Variables for Geo Colors */
:root {
  --geo-dark: #1A1B26;
  --geo-sidebar: #2D3047;
  --geo-coral: #E07A5F;
  --geo-sage: #81B29A;
  --geo-gold: #F2CC8F;
  --geo-secondary: #D8D8E4;  /* Readable body text */
  --geo-muted: #6B6B7B;      /* Subtle/hint text only */
}

/* Background Colors */
.bg-geo-dark { background-color: var(--geo-dark); }
.bg-geo-sidebar { background-color: var(--geo-sidebar); }
.bg-geo-coral { background-color: var(--geo-coral); }
.bg-geo-sage { background-color: var(--geo-sage); }
.bg-geo-gold { background-color: var(--geo-gold); }
.bg-geo-sidebar\/50 { background-color: rgba(45, 48, 71, 0.5); }
.bg-geo-sidebar\/80 { background-color: rgba(45, 48, 71, 0.8); }
.bg-geo-dark\/50 { background-color: rgba(26, 27, 38, 0.5); }
.bg-geo-coral\/10 { background-color: rgba(224, 122, 95, 0.1); }
.bg-geo-coral\/30 { background-color: rgba(224, 122, 95, 0.3); }
.bg-geo-sage\/10 { background-color: rgba(129, 178, 154, 0.1); }
.bg-geo-sage\/15 { background-color: rgba(129, 178, 154, 0.15); }

/* Gradient Colors (for scroll fade indicators) */
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-geo-sidebar {
  --tw-gradient-from: var(--geo-sidebar);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(45, 48, 71, 0));
}
.from-geo-dark {
  --tw-gradient-from: var(--geo-dark);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(26, 27, 38, 0));
}
.to-transparent {
  --tw-gradient-to: transparent;
}

/* Text Colors */
.text-geo-dark { color: var(--geo-dark); }
.text-geo-coral { color: var(--geo-coral); }
.text-geo-sage { color: var(--geo-sage); }
.text-geo-gold { color: var(--geo-gold); }
.text-geo-secondary { color: var(--geo-secondary); }  /* Body text - good contrast */
.text-geo-muted { color: var(--geo-muted); }          /* Hints only - low contrast */
.text-geo-muted\/60 { color: rgba(107, 107, 123, 0.6); }
.text-geo-muted\/70 { color: rgba(107, 107, 123, 0.7); }

/* Border Colors */
.border-geo-sage { border-color: var(--geo-sage); }
.border-geo-coral { border-color: var(--geo-coral); }
.border-geo-muted { border-color: var(--geo-muted); }
.border-geo-coral\/30 { border-color: rgba(224, 122, 95, 0.3); }
.border-geo-sage\/50 { border-color: rgba(129, 178, 154, 0.5); }

/* Border width utilities */
.border-l-3 { border-left-width: 3px; }
.border-3 { border-width: 3px; }

/* Border Radius */
.rounded-geo { border-radius: 4px; }
.rounded-geo-lg { border-radius: 8px; }
.rounded-geo-avatar { border-radius: 16px; }

/* Font Families */
.font-display {
  font-family: "Archivo Black", sans-serif;
}
.font-body {
  font-family: "Instrument Sans", sans-serif;
}
.font-mono {
  font-family: "JetBrains Mono", monospace;
}

/* Corner triangle accent - positioned absolute in top-right */
.geo-corner-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background-color: var(--geo-coral);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.geo-corner-accent-sm {
  width: 40px;
  height: 40px;
}

.geo-corner-accent-lg {
  width: 80px;
  height: 80px;
}

/* Angular button clip-path */
.geo-btn-angular {
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 15%);
}

/* Left border active indicator */
.geo-active-border {
  border-left: 3px solid var(--geo-sage);
  background-color: rgba(129, 178, 154, 0.15);
}

/* Card hover effect */
.geo-card-hover {
  transition: background-color 0.2s ease;
}

.geo-card-hover:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Squared avatar style */
.geo-avatar {
  border-radius: 16px;
  border: 2px solid var(--geo-sage);
}

.geo-avatar-highlight {
  border-color: var(--geo-coral);
}

/* Section header style */
.geo-section-title {
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--geo-coral);
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Geometric badge */
.geo-badge {
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--geo-sidebar);
  color: white;
}

/* Hover states */
.hover\:bg-geo-coral\/90:hover { background-color: rgba(224, 122, 95, 0.9); }
.hover\:bg-geo-coral\/80:hover { background-color: rgba(224, 122, 95, 0.8); }
.hover\:bg-geo-sidebar\/70:hover { background-color: rgba(45, 48, 71, 0.7); }
.hover\:bg-geo-sidebar\/80:hover { background-color: rgba(45, 48, 71, 0.8); }
.hover\:bg-geo-dark\/70:hover { background-color: rgba(26, 27, 38, 0.7); }
.hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, 0.05); }
.hover\:border-geo-sage:hover { border-color: var(--geo-sage); }
.hover\:text-geo-coral:hover { color: var(--geo-coral); }
.hover\:text-geo-gold\/80:hover { color: rgba(242, 204, 143, 0.8); }

/* Placeholder color */
.placeholder-geo-muted::placeholder { color: var(--geo-muted); }

/* Focus states */
.focus\:border-geo-sage:focus { border-color: var(--geo-sage); }
.focus\:ring-geo-coral\/50:focus { --tw-ring-color: rgba(224, 122, 95, 0.5); }
.focus\:border-geo-coral\/50:focus { border-color: rgba(224, 122, 95, 0.5); }

/* Data attribute states (for active match cards) */
[data-active="true"].border-geo-sage { border-color: var(--geo-sage); }
[data-active="true"].bg-geo-sage\/15 { background-color: rgba(129, 178, 154, 0.15); }

/* Animations */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-slide-in-right { animation: slideInRight 0.3s ease-out; }
.animate-slide-in-up { animation: slideInUp 0.3s ease-out; }
.animate-scale-in { animation: scaleIn 0.2s ease-out; }
.animate-fade-in { animation: fadeIn 0.2s ease-out; }

/* Selection color */
::selection {
  background-color: var(--geo-coral);
  color: white;
}

/* Ensure text selection works in message content */
.message-content {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* Custom selection color for message content - visible on both coral and dark backgrounds */
.message-content::selection {
  background-color: var(--geo-sage);
  color: var(--geo-dark);
}

.message-content::-moz-selection {
  background-color: var(--geo-sage);
  color: var(--geo-dark);
}

/* ============================================
   RESPONSIVE SPACING UTILITIES
   Mobile-first progressive enhancement
   ============================================ */

/* Responsive padding - scales up with screen size */
.p-responsive {
  padding: 1rem; /* 16px mobile */
}
@media (min-width: 640px) {
  .p-responsive { padding: 1.5rem; } /* 24px tablet */
}
@media (min-width: 768px) {
  .p-responsive { padding: 2rem; } /* 32px desktop */
}

.px-responsive {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .px-responsive { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  .px-responsive { padding-left: 2rem; padding-right: 2rem; }
}

.py-responsive {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media (min-width: 640px) {
  .py-responsive { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}
@media (min-width: 768px) {
  .py-responsive { padding-top: 2rem; padding-bottom: 2rem; }
}

/* Safe area padding for notched phones */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Fluid typography for headings */
.text-fluid-xl {
  font-size: clamp(1.25rem, 4vw, 1.5rem);
}
.text-fluid-2xl {
  font-size: clamp(1.5rem, 5vw, 2rem);
}
.text-fluid-3xl {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
}

/* Hide scrollbar but allow scrolling */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}
