/* style.css — RightKind Care design system
   LOCKED BRAND: Navy / Cream / Champagne Taupe.
   Editorial, boutique, quietly confident — a real operation, not a startup template.
   Typography: Cormorant Garamond (display/headings/logo) + Lato (body/UI).
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

:root {
  /* ---------- Type scale (fluid) ----------
     Bumped one notch site-wide for a 50+ audience (body/nav/button labels).
     Headings (xl/2xl/3xl/hero) intentionally left as-is. */
  --text-xs: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --text-sm: clamp(1rem, 0.925rem + 0.35vw, 1.125rem);
  --text-base: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 1.2rem + 5.5vw, 6.5rem);

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Fonts ---------- */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Radius ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* ---------- Transitions ---------- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Content widths ---------- */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1400px;
  --content-full: 100%;
}

/* ================= LIGHT MODE (default & only supported) ================= */
:root,
[data-theme='light'] {
  /* Surfaces — cream, white, warm neutral */
  --color-bg: #f7f3ea;
  --color-surface: #ffffff;
  --color-surface-2: #fbf9f4;
  --color-surface-offset: #f0ead9;
  --color-surface-offset-2: #e7ddc7;
  --color-surface-dynamic: #d8d5ce;
  --color-divider: #e3dcc9;
  --color-border: #d8d5ce;

  /* Text — navy / ink / slate */
  --color-text: #111827;
  --color-text-muted: #5e6672;
  --color-text-faint: #8b8f97;
  --color-text-inverse: #f7f3ea;

  /* Navy — brand anchor, used for header/footer/dark sections and headings */
  --color-navy: #0d1b2e;
  --color-navy-hover: #16273f;
  --color-navy-tint: #e9ecf1;

  /* Primary Accent — Champagne Taupe (SOLE accent color) */
  --color-primary: #c7b8a1;
  --color-primary-hover: #b5a488;
  --color-primary-active: #a6926f;
  --color-primary-highlight: #f0ead9;

  /* Secondary — reuse navy for structure, taupe is the only accent */
  --color-secondary: #0d1b2e;
  --color-secondary-hover: #16273f;
  --color-secondary-highlight: #e9ecf1;

  /* Status colors — kept muted/desaturated to sit quietly beside taupe */
  --color-warning: #a3661a;
  --color-warning-hover: #7d4d12;
  --color-warning-highlight: #ecdcc4;

  --color-error: #9c4a3b;
  --color-error-hover: #7a3a2d;
  --color-error-highlight: #ecd9d3;

  --color-success: #4b6b52;
  --color-success-hover: #37503d;
  --color-success-highlight: #dbe4dc;

  --color-gold: #a6926f;
  --color-gold-hover: #8a7959;
  --color-gold-highlight: #f0ead9;

  --shadow-sm: 0 1px 3px rgba(13, 27, 46, 0.07);
  --shadow-md: 0 6px 20px rgba(13, 27, 46, 0.10);
  --shadow-lg: 0 20px 50px rgba(13, 27, 46, 0.16);
}

/* ================= Base Typography ================= */
h1,
h2,
h3,
.font-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ================= Layout Primitives ================= */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow {
  max-width: var(--content-default);
}

.section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.section--tight {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}

/* ================= Buttons ================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  min-height: 54px;
  border: 1.5px solid transparent;
  font-family: var(--font-body);
}

.btn--primary {
  background: var(--color-navy);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-navy-hover);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.btn--outline:hover {
  background: var(--color-navy-tint);
}

.btn--on-dark {
  background: var(--color-primary);
  color: var(--color-navy);
}
.btn--on-dark:hover {
  background: var(--color-primary-hover);
}

.btn--outline-on-dark {
  background: transparent;
  border-color: rgba(247, 243, 234, 0.4);
  color: var(--color-text-inverse);
}
.btn--outline-on-dark:hover {
  background: rgba(247, 243, 234, 0.08);
  border-color: var(--color-text-inverse);
}

.btn--sm {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-xs);
  min-height: 48px;
}

/* ================= Cards ================= */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

/* ================= On-Dark Section Utility =================
   Applied to whole <section> elements to flip that section's
   background to Navy while keeping direct text legible. Cards that
   sit inside (service-card, testimonial-card, etc.) keep their own
   explicit light background + dark text, so they're unaffected. */
.section--on-dark {
  background: var(--color-navy);
  color: var(--color-text-inverse);
}
.section--on-dark .text-muted {
  color: color-mix(in oklab, var(--color-text-inverse) 72%, transparent);
}
/* White/cream cards always keep their own dark text, even inside an
   on-dark section — without this, .text-muted inside e.g. a testimonial
   card would inherit the light on-dark color and go nearly invisible
   against the card's light background. */
.section--on-dark .testimonial-card .text-muted,
.section--on-dark .service-card .text-muted,
.section--on-dark .team-card .text-muted,
.section--on-dark .contact-info-card .text-muted,
.section--on-dark .contact-form .text-muted {
  color: var(--color-text-muted);
}
.section--on-dark .eyebrow {
  color: var(--color-primary);
}
.section--on-dark .trust-item {
  color: var(--color-text-inverse);
}
.section--on-dark .check-list li {
  color: color-mix(in oklab, var(--color-text-inverse) 72%, transparent);
}
.section--on-dark .btn--outline {
  border-color: var(--color-text-inverse);
  color: var(--color-text-inverse);
}
.section--on-dark .btn--outline:hover {
  background: rgba(247, 243, 234, 0.08);
}
.section--on-dark .accordion-trigger {
  color: var(--color-text-inverse);
}
.section--on-dark .accordion-item {
  border-bottom-color: color-mix(in oklab, var(--color-text-inverse) 15%, transparent);
}
.section--on-dark.page-hero {
  border-bottom-color: color-mix(in oklab, var(--color-text-inverse) 15%, transparent);
}

/* ================= Utility ================= */
.eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-active);
  font-family: var(--font-body);
}

.eyebrow__segment {
  white-space: nowrap;
}

.eyebrow--on-dark {
  color: var(--color-primary);
}

.text-muted {
  color: var(--color-text-muted);
}