:root {
  --primary: #0f766e;
  --primary-hover: #115e59;
  --secondary: #164e63;
  --accent: #f59e0b;
  --background: #f8fafc;
  --surface: #ffffff;
  --border: #dbeafe;
  --text-primary: #111827;
  --text-secondary: #64748b;
  --shadow-colored: 0 8px 22px 0 rgb(15 118 110 / 0.15);

  /* Daytime table header palette (lighter green) */
  --table-header-start: #34d399;
  --table-header-end: #10b981;
  --table-header-border: #059669;
  --table-header-text: #ffffff;
}

/* Nighttime table header palette */
body.night-theme {
  --table-header-start: #0f172a;
  --table-header-end: #164e63;
  --table-header-border: #0f172a;
  --table-header-text: #ffffff;
}

body {
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background:
    radial-gradient(circle at 15% 20%, #dffcf8 0%, transparent 35%),
    radial-gradient(circle at 85% 5%, #fef3c7 0%, transparent 28%),
    var(--background) !important;
}

.title,
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}

.page-card,
.weather-card,
.card {
  border: 1px solid var(--border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

.page-card .card-header,
.weather-card .card-header,
.card-header.bg-primary,
.card-header.bg-info,
.card-header.bg-secondary {
  background: linear-gradient(105deg, #0f172a 0%, #164e63 100%) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}

.table thead th,
thead tr.bg-success th,
thead.thead-dark th {
  background: linear-gradient(105deg, var(--table-header-start) 0%, var(--table-header-end) 100%) !important;
  color: var(--table-header-text) !important;
  border-color: var(--table-header-border) !important;
}

.btn-primary,
.btn-success {
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%) !important;
  border-color: #115e59 !important;
  box-shadow: var(--shadow-colored) !important;
}

.btn-primary:hover,
.btn-success:hover {
  background: linear-gradient(135deg, #115e59 0%, #134e4a 100%) !important;
}

.btn-outline-secondary,
.btn-secondary {
  border-color: #cbd5e1 !important;
}

.alert-info {
  background: #ecfeff !important;
  border-color: #a5f3fc !important;
  color: #155e75 !important;
}

.badge-success,
.badge-online {
  background-color: #16a34a !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-nav .dropdown-item:hover {
  background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%) !important;
  color: #0f766e !important;
}

@media (max-width: 768px) {
  .container {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  .card,
  .page-card,
  .weather-card {
    border-radius: 0.85rem !important;
  }
}
