/* Combat Trainer - Steel Blue Theme */
/* Extracted from existing wireframes */

:root {
  /* Steel Blue Palette */
  --steel-gold: #3F6791;
  --steel-tint: #DEE7F1;
  --steel-deep: #1A2D42;
  --steel-on-accent: #FFFFFF;

  /* Semantic colors */
  --color-primary: var(--steel-gold);
  --color-background: var(--steel-deep);
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-text: var(--steel-tint);
  --color-text-muted: rgba(222, 231, 241, 0.6);

  /* Timer ring */
  --ring-active: var(--steel-gold);
  --ring-inactive: rgba(63, 103, 145, 0.3);

  /* Gradients */
  --hero-gradient: linear-gradient(
    123deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0) 25.68%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0) 80%,
    rgba(255, 255, 255, 0.12) 100%
  );

  /* Shadows */
  --shadow-glow: 0 0 20px rgba(63, 103, 145, 0.4);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Typography */
.font-saira {
  font-family: 'Saira Condensed', sans-serif;
}

.font-archivo {
  font-family: 'Archivo', sans-serif;
}

.font-mono {
  font-family: 'Spline Sans Mono', monospace;
}

/* Tailwind custom colors via CSS */
.bg-steel-deep { background-color: var(--steel-deep); }
.bg-steel-gold { background-color: var(--steel-gold); }
.bg-steel-tint { background-color: var(--steel-tint); }

.text-steel-deep { color: var(--steel-deep); }
.text-steel-gold { color: var(--steel-gold); }
.text-steel-tint { color: var(--steel-tint); }

.border-steel-gold { border-color: var(--steel-gold); }
.border-steel-tint { border-color: var(--steel-tint); }

/* Timer Ring Animation */
@keyframes countdown {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 565.48; } /* 2 * PI * 90 (radius) */
}

.timer-ring {
  stroke: var(--ring-active);
  stroke-width: 8;
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}

.timer-ring-bg {
  stroke: var(--ring-inactive);
  stroke-width: 8;
  fill: none;
}

/* Button states */
.btn-primary {
  background-color: var(--steel-gold);
  color: var(--steel-deep);
  font-weight: 700;
  transition: all 0.15s ease;
}

.btn-primary:hover {
  background-color: rgba(63, 103, 145, 0.9);
}

.btn-primary:active {
  transform: scale(0.98);
}

/* Card/Surface */
.surface {
  background: var(--color-surface);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Selection states */
.selected {
  border-color: var(--steel-gold) !important;
  background-color: rgba(63, 103, 145, 0.15) !important;
}

/* Hero gradient overlay (for main cards) */
.hero-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-gradient);
  pointer-events: none;
}

/* Bell pulse animation */
@keyframes bellPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.bell-pulse {
  animation: bellPulse 0.3s ease-in-out;
}

/* Exercise transition */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.exercise-enter {
  animation: slideIn 0.3s ease-out;
}

/* Rest period styling */
.rest-period {
  background: rgba(63, 103, 145, 0.2);
  border: 2px dashed var(--steel-gold);
}