/*
 * Look and feel for lightworkermark.co.nz (October 2026 refresh).
 *
 * The site moved from a spiritual indigo/purple/pink look to a calmer, more professional
 * "practice" look: warm neutrals, one clay accent, sage as a quiet second colour, a
 * humanist serif for headings, gentler corners and no bouncing buttons. Kept distinct from
 * Aligned Momentum (teal on slate navy, all-sans, pill buttons).
 *
 * tailwind.css is pre-built and every colour utility reads a --color-* variable, so the
 * pages keep their existing class names and these unlayered variables re-tint them:
 *   indigo 50-700 -> clay (the accent: buttons, links, soft panels)
 *   indigo 800-950 -> warm ink (headings, dark sections)
 *   purple -> sage, pink -> clay, slate -> warm stone
 * Load order: tailwind.css, theme.css, dark.css (dark.css re-maps surfaces for dark mode).
 */

:root {
  /* Clay accent; 600 is the button colour (5.4:1 with white text), 500 is 4.8:1 */
  --color-indigo-50:  #fbf4ef;
  --color-indigo-100: #f4e3d8;
  --color-indigo-200: #e9c7b3;
  --color-indigo-300: #dba387;
  --color-indigo-400: #c9815f;
  --color-indigo-500: #af5b37;
  --color-indigo-600: #a4532f;
  --color-indigo-700: #874326;
  /* Warm ink for headings and dark sections */
  --color-indigo-800: #4a3d35;
  --color-indigo-900: #2f2925;
  --color-indigo-950: #231e1a;

  /* Sage */
  --color-purple-50:  #f1f4ee;
  --color-purple-100: #e1e8db;
  --color-purple-200: #c9d5c0;
  --color-purple-300: #a9bba0;
  --color-purple-500: #71876a;
  --color-purple-600: #5e7558;
  --color-purple-700: #4c6047;
  --color-purple-900: #2e3b2b;
  --color-purple-950: #1e271c;

  /* Pink call-to-actions become the same clay, so there is one accent */
  --color-pink-50:  #fbf4ef;
  --color-pink-100: #f4e3d8;
  --color-pink-200: #e9c7b3;
  --color-pink-500: #a4532f;
  --color-pink-600: #a4532f;
  --color-pink-700: #874326;

  /* Green accents (emerald) follow the sage */
  --color-emerald-50:  #f1f4ee;
  --color-emerald-200: #c9d5c0;
  --color-emerald-500: #71876a;
  --color-emerald-600: #4c6047;
  --color-emerald-900: #2e3b2b;

  /* Warm stone neutrals; 500 is 4.8:1 on white */
  --color-slate-50:  #faf8f5;
  --color-slate-100: #f3efea;
  --color-slate-200: #e7e1d9;
  --color-slate-300: #d3cbc1;
  --color-slate-400: #a39a90;
  --color-slate-500: #7a7168;
  --color-slate-600: #5e564f;
  --color-slate-700: #463f39;
  --color-slate-800: #2f2a26;
  --color-slate-900: #221e1b;
  --color-slate-950: #161311;

  /* Gentler corners than before (cards were 1.5-3rem) */
  --radius-2xl: .875rem;
  --radius-3xl: 1rem;
}

/* ---- Type ------------------------------------------------------------------ */
/* "html" outranks each page's own <style> rule for headings, which loads later. */
html body { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
html h1, html h2, html h3, html .font-serif {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html h1.font-extrabold, html h2.font-extrabold { font-weight: 600; }

/* ---- Shape ----------------------------------------------------------------- */
.rounded-\[3rem\], .rounded-\[2\.5rem\], .rounded-\[2rem\] { border-radius: 1rem; }
.rounded-t-\[3rem\] { border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; }
/* Buttons: softly squared rather than pills (AM uses pills) */
a.rounded-full, button.rounded-full { border-radius: .5rem; }
/* No bouncing buttons or cards */
.hover\:scale-105:hover, .hover\:scale-110:hover, .group:hover .group-hover\:scale-110 { scale: none; }
.service-card:hover { transform: none; box-shadow: 0 6px 18px rgba(35, 30, 26, .08); }
/* Softer photo shadows and thinner photo frames */
img.shadow-2xl { box-shadow: 0 12px 32px -12px rgba(35, 30, 26, .28); }
img.border-8 { border-width: 4px; }

/* ---- Hero overlay: warm and neutral instead of an indigo glow ---------------- */
html .hero-gradient { background: linear-gradient(rgba(35, 30, 26, .78), rgba(35, 30, 26, .55)); }

/* ---- Header brand block ---------------------------------------------------- */
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark { width: 2.25rem; height: 2.25rem; flex: none; color: var(--color-indigo-600); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-main {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-indigo-950);
}
.brand-sub {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-slate-500);
}
.brand-sub { white-space: nowrap; }
@media (max-width: 480px) {
  .brand-main { font-size: 1rem; }
  .brand-sub { font-size: .6rem; letter-spacing: .08em; }
}

/* ---- Footer ---------------------------------------------------------------- */
.footer-brand { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 1.4rem; color: #fff; }
.footer-am { color: #d3cbc1; text-decoration: none; }
.footer-am:hover { color: #fff; text-decoration: underline; }

/* ---- Small line icons that replace emoji in cards --------------------------- */
.card-icon { width: 1.75rem; height: 1.75rem; }

@media (prefers-color-scheme: dark) {
  .brand-main { color: #f3e9e1; }
  .brand-sub { color: #a89d92; }
  .brand-mark { color: #d99a78; }
}

/* ---- Numbered steps (hypnotherapy page) ------------------------------------ */
.steps { list-style: decimal; padding-left: 1.5rem; }
.steps > li + li { margin-top: 1rem; }
.steps > li::marker { color: var(--color-indigo-600); font-weight: 700; }

/* ---- AI transparency (20 Oct 2026) ------------------------------------------ */
.footer-ai { color: #a39a90; }
.ai-list { list-style: disc; padding-left: 1.5rem; }
.ai-list > li + li { margin-top: 1rem; }
.ai-list > li::marker { color: var(--color-indigo-600); }