/* Eisenhower Health Foundation — Showcase Brand Styles */
/* No @apply — CDN Tailwind doesn't support it */

[x-cloak] {
  display: none !important;
}

:root {
  /* Brand Colors — Desert Palette */
  --brand-primary: #c2724f; /* Terracotta — headlines, CTAs, emphasis */
  --brand-secondary: #1b2a4a; /* Deep Indigo — text, headers, institutional gravity */
  --brand-accent: #8b9f82; /* Sage — charts, data viz, proof-of-impact */
  --brand-bg: #f5e6d3; /* Desert Sand — primary background */
  --brand-surface: #faf7f2; /* Warm White — card backgrounds */
  --brand-muted: #6b5b5b; /* Mountain Shadow — tertiary text, captions */
  --brand-rose: #d4a0a0; /* Dusty Rose — community/inclusion content */

  /* Dark Theme Surface Colors (showcase shell) */
  --surface-900: #0f172a;
  --surface-800: #1e293b;
  --surface-700: #334155;
  --surface-600: #475569;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--surface-900);
}
::-webkit-scrollbar-thumb {
  background: var(--surface-700);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--surface-600);
}

/* Email body rendering */
.email-body {
  white-space: pre-line;
  font-family: "Source Sans 3", system-ui, sans-serif;
  line-height: 1.6;
}

/* Detail panel transitions */
.detail-panel-enter {
  transform: translateX(100%);
}
.detail-panel-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-out;
}

/* Print styles for standalone pages */
@media print {
  .no-print {
    display: none !important;
  }
  body {
    background: white !important;
  }
}

/* Brand accent utilities (can't use @apply, so use these classes) */
.bg-brand-primary {
  background-color: var(--brand-primary);
}
.bg-brand-secondary {
  background-color: var(--brand-secondary);
}
.bg-brand-accent {
  background-color: var(--brand-accent);
}
.bg-brand-surface {
  background-color: var(--brand-surface);
}
.text-brand-primary {
  color: var(--brand-primary);
}
.text-brand-secondary {
  color: var(--brand-secondary);
}
.text-brand-accent {
  color: var(--brand-accent);
}
.text-brand-muted {
  color: var(--brand-muted);
}
.border-brand-primary {
  border-color: var(--brand-primary);
}
.border-brand-accent {
  border-color: var(--brand-accent);
}

/* Surface color utilities for dark theme */
.bg-surface-900 {
  background-color: var(--surface-900);
}
.bg-surface-800 {
  background-color: var(--surface-800);
}
.bg-surface-700 {
  background-color: var(--surface-700);
}
.border-surface-700 {
  border-color: var(--surface-700);
}
.border-surface-600 {
  border-color: var(--surface-600);
}