/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Custom Last War: Survival Game inspired dark color palette (gray/steel focus)
 * Use these variables in your Tailwind classes: e.g. bg-[var(--lw-bg)]
 */
:root {
  /* Backgrounds */
  --lw-bg: #181a1b;           /* deep gunmetal/charcoal */
  --lw-surface: #232526;      /* slightly lighter surface */

  /* Text */
  --lw-text: #e0e3e1;         /* light gray for text */
  --lw-muted: #8a8f8c;        /* muted gray for secondary text */

  /* Accents */
  --lw-accent: #495057;       /* steel gray for buttons/accents */
  --lw-accent-2: #ffb300;     /* amber for highlights */
  --lw-accent-3: #343a40;     /* dark slate gray for borders */
  --lw-accent-4: #23272b;     /* very dark gray for button backgrounds */
}

.input-success {
  border-color: hsl(142.1, 76.2%, 36.3%) !important;
  background-color: hsla(142.1, 76.2%, 36.3%, 0.2) !important;
}

.input-error {
  border-color: #991b1b !important;
  background-color: rgba(153, 27, 27, 0.2) !important;
}

/* Hide the number input spinners */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinner {
  -moz-appearance: textfield;
}