/* Brand Markdown Mail Theme
   Keep CSS minimal; most clients are picky. */

:root {
  --brand-bg: #ffffff;
  --brand-text: #111827;        /* slate-900 */
  --brand-muted: #6b7280;       /* gray-500 */
  --brand-border: #e5e7eb;      /* gray-200 */
  --brand-primary: #0ea5e9;     /* sky-500 */
  --brand-primary-dark: #0284c7;/* sky-600 */
  --brand-success: #16a34a;     /* green-600 */
  --brand-warning: #f59e0b;     /* amber-500 */
  --brand-danger:  #ef4444;     /* red-500 */
  --radius: 10px;               /* rounded buttons/cards */
}

body, .wrapper {
  background-color: var(--brand-bg) !important;
  color: var(--brand-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3 {
  color: var(--brand-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
p, ul, ol, td, th {
  color: var(--brand-text) !important;
  line-height: 1.6;
  font-weight: 400;
}
small, .subcopy p {
  color: var(--brand-muted) !important;
}

/* Container */
.email-wrapper {
  padding: 24px !important;
}
.email-content {
  border: 1px solid var(--brand-border) !important;
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
}

/* Header */
.email-masthead {
  padding: 24px !important;
}
.email-masthead_name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--brand-text) !important;
}

/* “Card” look for body */
.email-body_inner {
  padding: 0 24px 24px !important;
}

/* Buttons */
.button {
  border-radius: var(--radius) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
}
.button.button-primary, .button-primary {
  background-color: var(--brand-primary) !important;
  border-top: 10px solid var(--brand-primary) !important;
  border-right: 18px solid var(--brand-primary) !important;
  border-bottom: 10px solid var(--brand-primary) !important;
  border-left: 18px solid var(--brand-primary) !important;
}
.button.button-primary:hover {
  background-color: var(--brand-primary-dark) !important;
}

/* Tables */
.purchase, .content-cell table {
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
}

/* Code/links */
a { color: var(--brand-primary) !important; }

/* Footer */
.email-footer {
  color: var(--brand-muted) !important;
}

/* Dark mode hint (limited client support) */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-bg: #0b1116;
    --brand-text: #e5e7eb;
    --brand-muted: #9ca3af;
    --brand-border: #1f2937;
    --brand-primary: #38bdf8;
    --brand-primary-dark: #0891b2;
  }
}