/* Mailer-only utility classes. Hand-curated subset of the Tailwind tokens
   we use across email templates, written with literal values (no `var()`,
   no `oklch()`) so they survive in Outlook/Gmail/Apple Mail after Maizzle
   inlines them. Reference: keep names + values in sync with the website's
   Tailwind v4 build so the email visual matches the site.

   Loaded into <style> at the top of app/views/layouts/mailer.html.erb;
   Maizzle 6 (bin/inline-mailer-css.mjs) inlines matching rules at
   send time, then strips the <style> block and the bare class names. */

/* Layout */
.bg-gray-50  { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-white    { background-color: #ffffff; }
.bg-indigo-50  { background-color: #eef2ff; }
.bg-indigo-600 { background-color: #4f46e5; }
.bg-indigo-700 { background-color: #4338ca; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-amber-50   { background-color: #fffbeb; }

.border          { border-width: 1px; border-style: solid; }
.border-gray-200 { border-color: #e5e7eb; }
.border-indigo-200 { border-color: #c7d2fe; }
.rounded-md  { border-radius: 6px; }
.rounded-lg  { border-radius: 8px; }
.rounded-xl  { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

/* Spacing */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.p-0  { padding: 0; }
.p-4  { padding: 16px; }
.p-6  { padding: 24px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }

/* Typography */
.text-xs   { font-size: 12px; line-height: 1.5; }
.text-sm   { font-size: 13px; line-height: 1.5; }
.text-base { font-size: 15px; line-height: 1.6; }
.text-lg   { font-size: 17px; line-height: 1.5; }
.text-xl   { font-size: 19px; line-height: 1.4; }
.text-2xl  { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
.text-3xl  { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.text-white    { color: #ffffff; }
.text-indigo-600 { color: #4f46e5; }
.text-indigo-700 { color: #4338ca; }
.text-emerald-600 { color: #059669; }
.text-amber-600   { color: #d97706; }

.leading-snug    { line-height: 1.3; }
.leading-relaxed { line-height: 1.6; }
.tracking-tight  { letter-spacing: -0.01em; }

/* Layout helpers */
.block        { display: block; }
.inline-block { display: inline-block; }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.uppercase    { text-transform: uppercase; }
.no-underline { text-decoration: none; }
.underline    { text-decoration: underline; }
.italic       { font-style: italic; }

.w-full   { width: 100%; }
.max-w-2xl { max-width: 600px; }

/* Component-ish classes used by mailer partials */
.mail-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.mail-stat-cell {
  background-color: #f3f4f6;
  border-radius: 10px;
  padding: 14px 16px;
}
.mail-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}
.mail-stat-label {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.3;
}
.mail-divider {
  border: 0;
  border-top: 1px solid #e5e7eb;
  height: 1px;
  line-height: 0;
  margin: 24px 0;
}
.mail-thumb {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  object-fit: cover;
}