@import url("../midnight-studio/style.css");

:root {
  --brand: #20d8ff;
  --brand-2: #316dff;
  --accent: #79f7ff;
  --line: #24405a;
  --surface: #131a20;
  --surface-2: #192531;
  --shadow: 0 0 0 1px rgba(32, 216, 255, 0.16), 0 22px 54px rgba(0, 0, 0, 0.42);
}

.feature-grid article,
.list-card,
.admin-card,
.login-panel {
  border-color: rgba(32, 216, 255, 0.58);
  box-shadow:
    0 0 0 1px rgba(32, 216, 255, 0.28),
    0 0 24px rgba(32, 216, 255, 0.12),
    var(--shadow);
}

.brand-mark {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #061014;
  box-shadow: 0 0 22px rgba(32, 216, 255, 0.35);
}

.hero-panel {
  border-color: rgba(121, 247, 255, 0.65);
  background:
    linear-gradient(145deg, rgba(13, 22, 31, 0.96), rgba(21, 57, 92, 0.92));
  box-shadow:
    0 0 0 1px rgba(121, 247, 255, 0.22),
    0 0 34px rgba(32, 216, 255, 0.18),
    var(--shadow);
}

.site-nav a:hover,
.site-nav a.active,
.admin-nav a:hover,
.admin-nav a.active {
  background: rgba(32, 216, 255, 0.12);
  color: var(--accent);
}

.button.primary,
button.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #061014;
  box-shadow: 0 0 18px rgba(32, 216, 255, 0.24);
}

.button.secondary,
button.secondary {
  border-color: rgba(32, 216, 255, 0.42);
}

input:focus,
select:focus,
textarea:focus,
.visual-editor:focus {
  outline: 2px solid rgba(32, 216, 255, 0.75);
  outline-offset: 2px;
}

.pin-badge {
  background: var(--brand);
  color: #061014;
}