/* extras on top of Tailwind */
.card { @apply bg-white rounded-2xl border p-5 hover:shadow-lg transition; }
.grid-cards { @apply grid sm:grid-cols-2 lg:grid-cols-3 gap-6; }
.badge { @apply inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full bg-emerald-100 text-emerald-700; }
.breadcrumb { @apply text-emerald-700 hover:underline; }
.skeleton { @apply animate-pulse h-36 rounded-xl bg-gray-100; }
.btn { @apply px-4 py-2 rounded-lg bg-emerald-600 text-white font-semibold hover:bg-emerald-700; }
/* Simple prose-like styling without installing plugins */
.prose { line-height: 1.7; }
.prose h1 { font-size: 2rem; font-weight: 800; margin: 0.25rem 0 0.75rem; }
.prose h2 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
.prose p  { margin: 0.75rem 0; color: #334155; }
.prose ul, .prose ol { margin: 0.75rem 0 0.75rem 1.25rem; }
.prose img, .prose iframe { margin: 1rem 0; max-width: 100%; height: auto; }

/* --- Pastel palette and card tiles --- */
:root{
  --peach:#FFE5D3;   /* soft coral/peach */
  --mint:#D9F7F2;    /* mint */
  --sky:#DDEEFF;     /* baby blue */
  --lilac:#EDE4FF;   /* lilac */
  --butter:#FFF4C4;  /* pastel yellow */
  --coral:#FFD6D1;   /* light salmon */
  --powder:#EAF0FF;  /* powder blue */
  --sage:#E6F2E8;    /* pale green */
}

.pastel-card{
  border-radius: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(16,24,40,0.06);
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  backdrop-filter: blur(2px);
}
.pastel-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16,24,40,0.12);
  filter: brightness(1.02);
}

/* gradient backgrounds per tone */
.tone-peach  { background: linear-gradient(180deg,var(--peach) 0%, #fff 38%); }
.tone-mint   { background: linear-gradient(180deg,var(--mint)  0%, #fff 38%); }
.tone-sky    { background: linear-gradient(180deg,var(--sky)   0%, #fff 38%); }
.tone-lilac  { background: linear-gradient(180deg,var(--lilac) 0%, #fff 38%); }
.tone-butter { background: linear-gradient(180deg,var(--butter)0%, #fff 38%); }
.tone-coral  { background: linear-gradient(180deg,var(--coral) 0%, #fff 38%); }
.tone-powder { background: linear-gradient(180deg,var(--powder)0%, #fff 38%); }
.tone-sage   { background: linear-gradient(180deg,var(--sage)  0%, #fff 38%); }

/* subtle text tweaks on colored tiles */
.pastel-card h3{ color:#0f172a; font-weight:700; }
.pastel-card p { color:#334155; }

/* --- Pastel palette + tile styles --- */
:root{
  --peach:#FFE5D3;   /* peach */
  --mint:#D9F7F2;    /* mint */
  --sky:#DDEEFF;     /* baby blue */
  --lilac:#EDE4FF;   /* lilac */
  --butter:#FFF4C4;  /* pastel yellow */
  --coral:#FFD6D1;   /* salmon */
  --powder:#EAF0FF;  /* powder blue */
  --sage:#E6F2E8;    /* pale green */
}
.pastel-card{
  border-radius: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(16,24,40,0.06);
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  backdrop-filter: blur(2px);
}
.pastel-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16,24,40,0.12);
  filter: brightness(1.02);
}
.tone-peach  { background: linear-gradient(180deg,var(--peach) 0%, #fff 38%); }
.tone-mint   { background: linear-gradient(180deg,var(--mint)  0%, #fff 38%); }
.tone-sky    { background: linear-gradient(180deg,var(--sky)   0%, #fff 38%); }
.tone-lilac  { background: linear-gradient(180deg,var(--lilac) 0%, #fff 38%); }
.tone-butter { background: linear-gradient(180deg,var(--butter)0%, #fff 38%); }
.tone-coral  { background: linear-gradient(180deg,var(--coral) 0%, #fff 38%); }
.tone-powder { background: linear-gradient(180deg,var(--powder)0%, #fff 38%); }
.tone-sage   { background: linear-gradient(180deg,var(--sage)  0%, #fff 38%); }

.pastel-card h3{ color:#0f172a; font-weight:700; }
.pastel-card p { color:#334155; }

/* grid utility (works without Tailwind build) */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem; /* bigger vertical & horizontal space */
}
@media (min-width: 640px) {
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Pastel palette (light) ---------- */
:root{
  --peach:#FFE5D3;
  --mint:#D9F7F2;
  --sky:#DDEEFF;
  --lilac:#EDE4FF;
  --butter:#FFF4C4;
  --coral:#FFD6D1;
  --powder:#EAF0FF;
  --sage:#E6F2E8;

  --tile-border: rgba(16,24,40,0.06);
  --tile-shadow: 0 2px 8px rgba(16,24,40,0.06);
  --tile-shadow-hover: 0 8px 22px rgba(16,24,40,0.12);

  --text-strong: #0f172a; /* slate-900 */
  --text-muted:  #334155; /* slate-600 */
}

.pastel-card{
  border-radius: 18px;
  padding: 18px 20px;
  border: 1px solid var(--tile-border);
  box-shadow: var(--tile-shadow);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  backdrop-filter: blur(2px);
}
.pastel-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--tile-shadow-hover);
  filter: brightness(1.02);
}

.tone-peach  { background: linear-gradient(180deg,var(--peach) 0%,  #fff 38%); }
.tone-mint   { background: linear-gradient(180deg,var(--mint)  0%,  #fff 38%); }
.tone-sky    { background: linear-gradient(180deg,var(--sky)   0%,  #fff 38%); }
.tone-lilac  { background: linear-gradient(180deg,var(--lilac) 0%,  #fff 38%); }
.tone-butter { background: linear-gradient(180deg,var(--butter)0%,  #fff 38%); }
.tone-coral  { background: linear-gradient(180deg,var(--coral) 0%,  #fff 38%); }
.tone-powder { background: linear-gradient(180deg,var(--powder)0%,  #fff 38%); }
.tone-sage   { background: linear-gradient(180deg,var(--sage)  0%,  #fff 38%); }

.pastel-card h3{ color: var(--text-strong); font-weight:700; }
.pastel-card p { color: var(--text-muted);  }

/* ---------- Dark theme adjustments ---------- */
html.dark{
  --tile-border: rgba(255,255,255,0.08);
  --tile-shadow: 0 4px 16px rgba(0,0,0,.35);
  --tile-shadow-hover: 0 10px 26px rgba(0,0,0,.55);

  --text-strong: #e5e7eb; /* slate-200 */
  --text-muted:  #cbd5e1; /* slate-300 */
}

/* Keep a gentle, dark-friendly tile while preserving tone */
html.dark .tone-peach,
html.dark .tone-mint,
html.dark .tone-sky,
html.dark .tone-lilac,
html.dark .tone-butter,
html.dark .tone-coral,
html.dark .tone-powder,
html.dark .tone-sage{
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 38%);
}

html.dark .pastel-card h3{ color: var(--text-strong); }
html.dark .pastel-card p { color: var(--text-muted); }

/* Extra vertical rhythm when stacked */
.pastel-card + .pastel-card { margin-top: 12px; }

/* If you kept grid-cards utility, give it comfy gaps */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }