/*
 * Email-specific Tailwind CSS (Tailwind v4 + Maizzle)
 *
 * Uses @maizzle/tailwindcss which:
 * - Replaces oklch colors with hex equivalents
 * - Uses px instead of rem
 * - Provides email-client specific utilities
 */

@import "tailwindcss/utilities" source(none);

/* Source paths for email templates only */
@source "../../../app/views/layouts/mailer.html.haml";
@source "../../../app/views/*_mailer/*.html.haml";
@source "../../../app/views/email_components/**/*.html.haml";

/* Maizzle theme overrides - replaces oklch with hex, rem with px */
@import "@maizzle/tailwindcss";

@theme static {
  --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

/* ==========================================================================
   Email-safe base styles
   ========================================================================== */
html {
  background: white;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: white;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
  display: block;
  outline: none;
  text-decoration: none;
}

.email-container {
  max-width: 600px;
  margin: 0 auto;
}

/* ==========================================================================
   Prose styles for email content
   ========================================================================== */

.prose {
  font-size: 16px;
  line-height: 1.5;
  color: #1f2937;
}

.prose p {
  margin: 0 0 16px 0;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose h1 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 16px 0;
}

.prose h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.prose a {
  color: #2563eb;
  text-decoration: underline;
}

.prose strong {
  font-weight: 700;
}

hr {
  border: none;
  border-top: 1px solid #d1d5db;
  margin: 16px 0;
}

/* ==========================================================================
   Email button component
   ========================================================================== */

.email-button {
  display: inline-block;
  padding: 6px 24px;
  background-color: #111827;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
}