/* ==================================================================
   Dominus — design tokens.
   Values mirrored 1:1 from the Astro redesign (dominmus-astro).
   ================================================================== */

:root {
  /* Palette (from the logo) */
  --dm-plum-50: #faf5f9;
  --dm-plum-100: #f5e8f2;
  --dm-plum-200: #e9cfe4;
  --dm-plum-300: #d5a7cd;
  --dm-plum-400: #b975ac;
  --dm-plum-500: #9c4f8d;
  --dm-plum-600: #7e3871;
  --dm-plum-700: #642c5b;
  --dm-plum-800: #4a1e44;
  --dm-plum-900: #3c1838;
  --dm-plum-950: #240d21;

  --dm-accent-300: #fb9d84;
  --dm-accent-400: #f4705a;
  --dm-accent-500: #ef4530;
  --dm-accent-600: #d92c1c;

  --dm-ink-50: #f8f7f8;
  --dm-ink-100: #eceaec;
  --dm-ink-500: #6c6570;
  --dm-ink-700: #3f3a40;
  --dm-ink-800: #2a242c;
  --dm-ink-900: #1c161d;
  --dm-ink-950: #120d13;

  --dm-radius: 1rem;
  --dm-radius-lg: 1.5rem;
  --dm-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.35);

  /* Astro container: max-w-76rem (1216px), padding 1.25rem → 2rem */
  --dm-container: 76rem;
  --dm-container-pad: 1.25rem;

  /* Kadence palette overrides. Note: do NOT set palette2 to the coral accent —
     Kadence maps --global-palette-highlight-alt to palette2, which made nav
     hover/active states render red. Keep palette2 equal to the primary so
     highlight states stay on-brand plum. */
  --global-palette1: #642c5b;
  --global-palette2: #642c5b;
  --global-palette3: #1c161d;
  --global-palette4: #3f3a40;
}

@media (min-width: 768px) {
  :root { --dm-container-pad: 2rem; }
}

/* ------------------------------------------------------------------ */
/* Base typography — matches Astro body/heading scale                  */
/* ------------------------------------------------------------------ */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--dm-ink-700);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--dm-ink-900);
}

/* Astro h1: text-4xl (36px) → sm:text-5xl → 48px; hero uses larger clamps */
h1 { font-size: 2.25rem; }
@media (min-width: 640px) { h1 { font-size: 3rem; } }

/* Readable body column — Astro prose-read: 1.075rem / 1.8 */
.dm-body,
.dm-page__body,
.dm-post__body {
  font-size: 1.075rem;
  line-height: 1.8;
  color: var(--dm-ink-700);
}
.dm-body h2,
.dm-page__body h2,
.dm-post__body h2 {
  font-size: 1.6rem;
  margin-top: 2.2rem;
  margin-bottom: 0.75rem;
}
.dm-body h3,
.dm-page__body h3,
.dm-post__body h3 {
  font-size: 1.3rem;
  margin-top: 1.8rem;
  margin-bottom: 0.5rem;
}
.dm-body p, .dm-page__body p, .dm-post__body p { margin-bottom: 1.1rem; }
.dm-body li, .dm-page__body li, .dm-post__body li { margin-bottom: 0.5rem; }

/* ------------------------------------------------------------------ */
/* Container — matches Astro .container-page                           */
/* ------------------------------------------------------------------ */
.container,
.dm-container {
  width: 100%;
  max-width: var(--dm-container);
  margin-inline: auto;
  padding-inline: var(--dm-container-pad);
}

/* ------------------------------------------------------------------ */
/* Buttons — matches Astro .btn                                        */
/* ------------------------------------------------------------------ */
.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  border-radius: 9999px;
  padding: 0.7rem 1.35rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease,
    color 0.15s ease, border-color 0.15s ease;
}
.dm-btn:hover { transform: translateY(-1px); }
.dm-btn--solid { background: var(--dm-plum-600); color: #fff; box-shadow: 0 10px 25px -12px rgba(100, 44, 91, 0.55); }
.dm-btn--solid:hover { background: var(--dm-plum-700); color: #fff; }
.dm-btn--accent { background: var(--dm-accent-400); color: var(--dm-ink-900); }
.dm-btn--accent:hover { background: var(--dm-accent-500); color: var(--dm-ink-900); }
.dm-btn--ghost { border: 1.5px solid var(--dm-plum-600); color: var(--dm-plum-700); }
.dm-btn--ghost:hover { background: var(--dm-plum-50); color: var(--dm-plum-800); }

.dm-eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dm-plum-600);
  margin: 0 0 0.5rem;
}
.dm-link { font-weight: 600; text-decoration: none; color: var(--dm-plum-700); }
.dm-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Pill — mirrors Astro `.badge` (used as page eyebrows)               */
/* ------------------------------------------------------------------ */
.dm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--dm-plum-50);
  color: var(--dm-plum-700);
}

/* ------------------------------------------------------------------ */
/* Breadcrumbs — mirrors Astro <Breadcrumbs>                            */
/* ------------------------------------------------------------------ */
.dm-breadcrumbs { font-size: 0.875rem; }
.dm-breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  list-style: none; margin: 0; padding: 0; color: var(--dm-ink-700);
}
.dm-breadcrumbs li { display: flex; align-items: center; gap: 0.375rem; }
.dm-breadcrumbs a { color: inherit; text-decoration: none; }
.dm-breadcrumbs a:hover { color: var(--dm-plum-700); text-decoration: underline; }
.dm-breadcrumbs [aria-current="page"] { font-weight: 500; color: var(--dm-ink-900); }
.dm-breadcrumbs__sep { color: var(--dm-ink-500); }

/* Top-of-page breadcrumb strip (Astro: container-page pt-8) */
.dm-crumbs {
  width: 100%; max-width: var(--dm-container); margin-inline: auto;
  padding: 2rem var(--dm-container-pad) 0;
}

/* ------------------------------------------------------------------ */
/* Icon box — Astro rounded-square icon tiles                          */
/* ------------------------------------------------------------------ */
.dm-icon-box {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 0.85rem;
  background: var(--dm-plum-50); color: var(--dm-plum-700);
  flex-shrink: 0;
}
.dm-icon-box svg { width: 1.5rem; height: 1.5rem; }
.dm-icon-box--solid { background: var(--dm-plum-600); color: #fff; }
.dm-icon-box--amber { background: #fffbeb; color: #d97706; }
.dm-icon-box--emerald { background: #ecfdf5; color: #059669; }
.dm-icon-box--blue { background: #eff6ff; color: #2563eb; }

a { color: var(--dm-plum-700); }
a:hover { color: var(--dm-plum-900); }

/* ------------------------------------------------------------------ */
/* Accessibility                                                       */
/* ------------------------------------------------------------------ */
:focus-visible { outline: 3px solid var(--dm-plum-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}