:root {
  --color-primary: #f47a1f;
  --color-primary-hover: #ff9c3a;
  --color-dark: #1c1a18;
  --color-background: #f5f3ee;
  --color-stone: #d8d3c9;
  --color-card-border: #e7e2d8;
  --color-text: #4b4a46;
  --color-premium: #c8a24d;
  --color-danger: #9a4f3f;
  --color-danger-hover: #b8624f;
}

body {
  font-family: "Avenir Next", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-hover);
}

.site-header {
  background-color: var(--color-dark);
  color: var(--color-background);
}

.brand-header-link {
  display: inline-flex;
  align-items: center;
}

.brand-header-logo {
  display: block;
  height: 42px;
  width: auto;
}

@media (min-width: 768px) {
  .brand-header-logo {
    height: 48px;
  }
}

.site-footer {
  background-color: var(--color-dark);
  color: #d7d1c6;
  border-top: 1px solid #2f2b28;
}

.site-footer a {
  color: #f0e4cc;
}

.site-footer a:hover {
  color: var(--color-primary);
}

.card {
  background-color: #ffffff;
  border: 1px solid var(--color-card-border);
  border-radius: 0.85rem;
  box-shadow: 0 8px 20px rgba(28, 26, 24, 0.08);
}

.card-body {
  padding: 1rem;
}

.label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.input,
.textarea {
  width: 100%;
  border: 1px solid var(--color-card-border);
  border-radius: 0.55rem;
  padding: 0.55rem 0.75rem;
  background-color: #ffffff;
  color: var(--color-dark);
}

.textarea {
  resize: vertical;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding: 0.5rem 0.9rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  color: #ffffff;
}

.btn-secondary {
  background-color: #ffffff;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn-danger {
  background-color: var(--color-danger);
  color: #ffffff;
}

.btn-danger:hover {
  background-color: var(--color-danger-hover);
  color: #ffffff;
}

.link-primary {
  color: var(--color-primary);
  text-decoration: none;
}

.link-primary:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.event-chip,
.event-chip:hover,
.event-chip:focus {
  color: #ffffff !important;
}

.event-chip .text-amber-300,
.event-chip:hover .text-amber-300,
.event-chip:focus .text-amber-300 {
  color: #ffe0a8 !important;
}

.event-chip .text-emerald-300,
.event-chip:hover .text-emerald-300,
.event-chip:focus .text-emerald-300 {
  color: #d4f6dc !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.shadow {
  box-shadow: 0 8px 20px rgba(28, 26, 24, 0.08) !important;
}

.ring-slate-200\/70 {
  --tw-ring-color: rgba(216, 211, 201, 0.7) !important;
}

.border,
.border-slate-200,
.border-slate-300 {
  border-color: var(--color-card-border) !important;
}

.text-slate-900 {
  color: var(--color-dark) !important;
}

.text-slate-600,
.text-slate-500 {
  color: var(--color-text) !important;
}

.bg-slate-100,
.bg-slate-50 {
  background-color: #f0ede6 !important;
}

.bg-slate-800 {
  background-color: #2f2b28 !important;
}

.bg-slate-900,
.bg-emerald-600,
.bg-amber-400 {
  background-color: var(--color-primary) !important;
}

.text-amber-300 {
  color: #ffd89c !important;
}

.text-amber-800 {
  color: #8a6728 !important;
}

.hover\:bg-slate-700:hover,
.hover\:bg-emerald-500:hover,
.hover\:bg-amber-300:hover {
  background-color: var(--color-primary-hover) !important;
}

.bg-rose-600 {
  background-color: var(--color-danger) !important;
}

.hover\:bg-rose-500:hover {
  background-color: var(--color-danger-hover) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid rgba(244, 122, 31, 0.35);
  outline-offset: 1px;
  border-color: var(--color-primary) !important;
}

.calendar-cell {
  min-height: 140px;
}

.calendar-cell--large {
  min-height: 170px;
  background-image: linear-gradient(to bottom, rgba(216, 211, 201, 0.24), rgba(255, 255, 255, 0));
}

.game-row {
  transition: background-color 0.2s ease;
}

.game-row:hover {
  background-color: rgba(244, 122, 31, 0.05);
}

.markdown-content > :first-child {
  margin-top: 0;
}

.markdown-content > :last-child {
  margin-bottom: 0;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content pre {
  margin: 0.35rem 0;
}

.markdown-content ul,
.markdown-content ol {
  padding-left: 1.25rem;
}

.markdown-content a {
  color: var(--color-primary);
  text-decoration: underline;
}

.markdown-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
  background: #f0ede6;
  border-radius: 0.2rem;
  padding: 0.05rem 0.25rem;
}

.markdown-content h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-dark);
}

.markdown-content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-dark);
}

.markdown-content p {
  margin-bottom: 0.85rem;
  line-height: 1.6;
  color: var(--color-text);
}

.markdown-content ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.markdown-content li {
  margin-bottom: 0.3rem;
}

@media (max-width: 768px) {
  .calendar-cell {
    min-height: 110px;
  }

  .calendar-cell--large {
    min-height: 120px;
  }
}