html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

:root {
  /* Main color palette - inspired by ocean and seafood (darker shades) */
  --primary-color: #0e6584;       /* Deeper ocean blue */
  --primary-light: #2a8bac;       /* Darker light ocean blue */
  --primary-dark: #074a61;        /* Darker ocean blue */
  --accent-color: #e78c45;        /* Richer golden fried fish */
  --accent-light: #f0a978;        /* Deeper golden */
  --accent-dark: #d15a3c;         /* Deeper spicy sauce */
  --neutral-bg: #e4edf5;          /* Slightly darker seafoam background */
  --neutral-text: #1d2d40;        /* Deeper sea text */
  --neutral-border: #a9c0d2;      /* Darker soft border color */
  --success-color: #1a8a7d;       /* Deeper seaweed green */
  --warning-color: #e0b84f;       /* Deeper sand yellow */
  --danger-color: #d12a38;        /* Deeper coral red */
  --info-color: #346a8c;          /* Deeper blue-green */
  
  /* Shadows and effects - slightly stronger */
  --card-shadow: 0 4px 12px rgba(29, 45, 64, 0.15);
  --hover-shadow: 0 6px 16px rgba(29, 45, 64, 0.2);
  --button-shadow: 0 2px 4px rgba(29, 45, 64, 0.25);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--neutral-bg), 0 0 0 0.25rem var(--primary-color);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: var(--neutral-bg);
  color: var(--neutral-text);
  font-family: 'Monaco', 'Consolas', monospace, 'Poppins', 'Segoe UI', sans-serif;
}

/* Button styles */
.btn-primary {
  background: linear-gradient(to bottom, var(--primary-color), var(--primary-dark));
  border-color: var(--primary-dark);
  color: white;
  box-shadow: var(--button-shadow);
  transition: all 0.2s ease;
}

.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(to bottom, var(--primary-dark), var(--primary-dark));
  border-color: var(--primary-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: linear-gradient(to bottom, var(--accent-color), var(--accent-dark));
  border-color: var(--accent-dark);
  color: white;
  box-shadow: var(--button-shadow);
  transition: all 0.2s ease;
}

.btn-secondary:hover, .btn-secondary:focus {
  background: linear-gradient(to bottom, var(--accent-dark), var(--accent-dark));
  border-color: var(--accent-dark);
  color: white;
  transform: translateY(-1px);
}

/* Card styles */
.card {
  background-color: #f8fafc;
  border-color: var(--neutral-border);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--hover-shadow);
  transform: translateY(-2px);
}

.card-header {
  background-color: var(--primary-light);
  color: white;
  border-bottom: 1px solid var(--primary-color);
  font-weight: 600;
}

/* Table styles */
.table {
  background-color: #f8fafc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.table thead {
  background-color: var(--primary-light);
  color: white;
  font-weight: 600;
}

.table tbody tr:hover {
  background-color: rgba(42, 139, 172, 0.05);
}

/* Form styles */
.form-control {
  border-color: var(--neutral-border);
  border-radius: 6px;
}

.form-control:focus {
  border-color: var(--primary-color);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--neutral-text);
  opacity: 0.6;
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Badge styles */
.badge-primary {
  background-color: var(--primary-color);
  color: white;
}

.badge-secondary {
  background-color: var(--accent-color);
  color: var(--neutral-text);
}

.badge-success {
  background-color: var(--success-color);
  color: white;
}

.badge-warning {
  background-color: var(--warning-color);
  color: var(--neutral-text);
}

.badge-danger {
  background-color: var(--danger-color);
  color: white;
}

.badge-info {
  background-color: var(--info-color);
  color: white;
}

/* Alert styles */
.alert-primary {
  background-color: rgba(26, 123, 155, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-dark);
}

.alert-secondary {
  background-color: rgba(244, 162, 97, 0.1);
  border-color: var(--accent-color);
  color: var(--accent-dark);
}

.alert-success {
  background-color: rgba(42, 157, 143, 0.1);
  border-color: var(--success-color);
  color: var(--success-color);
}

.alert-warning {
  background-color: rgba(233, 196, 106, 0.1);
  border-color: var(--warning-color);
  color: #856404;
}

.alert-danger {
  background-color: rgba(230, 57, 70, 0.1);
  border-color: var(--danger-color);
  color: var(--danger-color);
}

/* Custom animations */
.wave-bg {
  position: relative;
  overflow: hidden;
}

.wave-bg::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(75, 163, 195, 0.2) 0%, rgba(240, 245, 249, 0) 70%);
  animation: wave 15s infinite linear;
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}