:root {
  --stone-navy: #17212b;
  --stone-navy-dark: #0f1821;
  --stone-green: #35c66b;
  --stone-green-dark: #27a958;
  --stone-background: #f3f6f8;
  --stone-surface: #ffffff;
  --stone-border: #dce4e9;
  --stone-text: #17212b;
  --stone-muted: #617086;
  --stone-success-bg: #e9f8ef;
  --stone-danger: #c73b3b;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--stone-background);
  color: var(--stone-text);
}

header {
  background: var(--stone-navy);
}

.card {
  background: var(--stone-surface);
  border: 1px solid var(--stone-border);
  box-shadow:
    0 10px 28px
    rgba(23, 33, 43, 0.08);
}

.grid > .card {
  border-top: 4px solid var(--stone-green);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.grid > .card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 34px
    rgba(23, 33, 43, 0.13);
}

h1,
h2,
h3,
h4,
th {
  color: var(--stone-navy);
}

p {
  color: var(--stone-muted);
}

button:not([aria-label^="Close"]) {
 background: var(--stone-green-dark);
color: #ffffff;
border: 1px solid var(--stone-green-dark);
  border-radius: 8px;
  font-weight: 750;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

button:not([aria-label^="Close"]):hover:not(:disabled) {
  background: var(--stone-navy);
border-color: var(--stone-navy);
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px
    rgba(53, 198, 107, 0.24);
}

button:disabled {
  background: #aab6bf;
  border-color: #aab6bf;
  color: #ffffff;
  cursor: not-allowed;
  opacity: 0.75;
}

input,
select,
textarea {
  border: 1px solid #b9c5ce;
  border-radius: 8px;
  background: #ffffff;
  color: var(--stone-text);
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--stone-green);
  box-shadow:
    0 0 0 3px
    rgba(53, 198, 107, 0.16);
}

table {
  background: #ffffff;
}

th {
  background: #edf3f1;
  border-bottom:
    2px solid var(--stone-green) !important;
}

tbody tr:hover {
  background: #f2faf5;
}

a {
  color: var(--stone-green-dark);
  font-weight: 650;
}

a:hover {
  color: var(--stone-navy);
}

.success,
.success-message {
  background: var(--stone-success-bg);
  color: #116532;
  border-color: #bce8cc;
}
header h1,
header h2,
header h3,
header h4 {
  color: #ffffff;
}