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

/* 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); }

/* 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;
}