/* Ground Layer Minimalist Text Design */

.ground-layer {
  --ground-primary: #D4A373;
  --ground-secondary: #F2E8CF;
  --ground-accent: #A0785A;
  --ground-light: #FEFAE0;
  --text-blend: rgba(168, 120, 90, 0.7);  /* Blended text color */
  --text-subtle: rgba(168, 120, 90, 0.5); /* Very subtle text */
  
  color: var(--text-blend);
}

/* Remove conflicting metrics-display styles - handled in main CSS */

.metric-display {
  border: none;
  background: transparent;
  padding: 0;
  transition: opacity 300ms ease;
}

.metric-display:hover {
  opacity: 0.8;
}

.metric-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.metric-value {
  font-size: clamp(2rem, 4vw, 2.5rem); /* Proportional but not too large */
  font-weight: 300;
  color: var(--ground-primary);
  display: block;
  margin-bottom: 0.25rem;
  transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: auto; /* Enable hardware acceleration when animating */
}

/* Enhanced animations for smooth counter transitions */
.metric-value.animating {
  will-change: contents;
}

.metric-details {
  font-size: clamp(0.875rem, 2vw, 1rem); /* Proportional details */
  font-weight: 300;
  color: var(--text-subtle);
  line-height: 1.4;
  transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: auto;
}

/* Smooth text transitions */
.metric-details.transitioning {
  will-change: opacity;
}

/* Performance optimization during dragging */
body.dragging .metric-value,
body.dragging .metric-details {
  transition-duration: 0ms; /* Immediate updates during drag */
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .metric-main {
    align-items: flex-start;
  }
}

/* Text sizing is now handled by clamp() functions above */

/* High contrast mode support - maintain minimalist aesthetic */
@media (prefers-contrast: high) {
  .metric-display {
    color: ButtonText;
  }
  
  .metric-value {
    color: ButtonText;
  }
  
  .metric-details {
    color: ButtonText;
    opacity: 0.8;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .metric-value,
  .metric-details,
  .metric-display {
    transition-duration: 0.01ms !important;
  }
}

/* Focus indicators - minimal but visible */
.metric-display:focus-within {
  outline: 2px solid rgba(0, 95, 204, 0.6);
  outline-offset: 4px;
  border-radius: 4px;
}