/* Serendipity foundations. Load after Bootstrap and before page styles. */
:root {
  --color-canvas: #f6f3ed;
  --color-surface: #fbf9f5;
  --color-surface-soft: #eee9df;
  --color-sage: #e8e9df;
  --color-rose: #f1e4dc;
  --color-text: #36352f;
  --color-text-soft: #535149;
  --color-muted: #686459;
  --color-brand: #70735f;
  --color-brand-hover: #5d604e;
  --color-accent: #806948;
  --color-accent-soft: #e7d9bf;
  --color-border: #d8cec0;
  --color-control-border: #898574;
  --color-focus: #806132;
  --color-success: #3f603f;
  --color-error: #a13f36;
  --color-on-brand: #fffdf8;

  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-script: var(--font-display);
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --text-h1: clamp(2.375rem, 1.75rem + 2.7vw, 4rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.1vw, 2.5rem);
  --text-h3: clamp(1.375rem, 1.2rem + .5vw, 1.75rem);
  --leading-body: 1.65;
  --leading-heading: 1.18;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-space: clamp(3rem, 6vw, 6rem);
  --section-gap: clamp(1.125rem, 3vw, 2.125rem);
  --content-width: 75rem;
  --reading-width: 65ch;
  --radius-sm: .375rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --radius-button: 0;
  --heading-weight: 500;
  --editorial-width: 100rem;
  --header-space: clamp(.75rem, 1.5vw, 1.5rem);
  --hero-space: clamp(1.5rem, 3vw, 2.75rem);
  --image-row-gap: .75rem;
  --texture-linen: url("../images/about/about-background-tile.webp");
  --paper-wash: color-mix(in srgb, var(--color-canvas) 97%, transparent);
  --shadow-sm: 0 2px 8px rgb(48 56 46 / 5%);
  --shadow-md: 0 12px 32px rgb(48 56 46 / 9%);
  --duration-fast: 160ms;
  --duration-normal: 240ms;
  --ease-standard: cubic-bezier(.2, .6, .3, 1);

  /* Compatibility aliases: existing templates use these names. */
  --ink: var(--color-text);
  --ink-soft: var(--color-text-soft);
  --muted: var(--color-muted);
  --bg: var(--color-canvas);
  --panel: var(--color-surface-soft);
  --panel-2: var(--color-surface);
  --border: var(--color-border);
  --gold: var(--color-accent);
  --gold-soft: var(--color-accent-soft);
  --surface-1: var(--color-surface);
  --surface-2: var(--color-surface-soft);
  --hairline: var(--color-border);
  --shadow-soft: var(--shadow-md);
  --clr-text: var(--color-text);
  --clr-text-strong: var(--color-text);
  --clr-bg: var(--color-canvas);
  --clr-panel: var(--color-surface-soft);
  --brand-1: var(--color-brand);
  --brand-1-600: var(--color-brand);
  --brand-2: var(--color-text);
  --accent-cream: var(--color-canvas);
  --accent-gold: var(--color-accent);
  --holiday-soft-cream: var(--color-surface);
  --holiday-red: var(--color-accent);
  --holiday-deep-green: var(--color-brand);

  /* Bootstrap's grid and utilities remain available. */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--text-base);
  --bs-body-line-height: var(--leading-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-canvas);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-secondary-color: var(--color-muted);
  --bs-link-color: var(--color-brand);
  --bs-link-hover-color: var(--color-brand-hover);
}

body { font: var(--text-base)/var(--leading-body) var(--font-body); color: var(--color-text); background: var(--color-canvas); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--heading-weight); line-height: var(--leading-heading); color: var(--color-text); text-wrap: balance; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }
p { margin-bottom: var(--space-4); }
a { color: var(--color-brand); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--color-brand-hover); }
::selection { background: var(--color-accent-soft); color: var(--color-text); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.text-muted { color: var(--color-muted) !important; /* Bootstrap utility */ }
.text-strong { color: var(--color-text); }
.small, small { font-size: var(--text-sm); }
.lead { font-size: var(--text-lg); font-weight: 400; line-height: var(--leading-body); }
.eyebrow { font: 600 var(--text-xs)/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }
.section-title, .section-title .title { margin-bottom: var(--space-4); }
.sub-title { color: var(--color-muted); }
.reading-width { max-width: var(--reading-width); }
.section-space { padding-block: var(--section-space); }
.stack > * + * { margin-top: var(--space-5); }
.surface { background: var(--color-surface); }
.surface-soft, .bg-holiday-soft { background: var(--color-surface-soft); }
.bg-wash { background: radial-gradient(ellipse at 10% 0, var(--color-sage), transparent 65%), var(--color-canvas); }
.divider { height: 1px; background: var(--color-border); }

/* Buttons: primary by default; native plugin controls are deliberately excluded. */
.main-btn, .btn {
  --bs-btn-color: var(--color-on-brand);
  --bs-btn-bg: var(--color-brand);
  --bs-btn-border-color: var(--color-brand);
  --bs-btn-hover-color: var(--color-on-brand);
  --bs-btn-hover-bg: var(--color-brand-hover);
  --bs-btn-hover-border-color: var(--color-brand-hover);
  --bs-btn-active-color: var(--color-on-brand);
  --bs-btn-active-bg: var(--color-brand-hover);
  --bs-btn-active-border-color: var(--color-brand-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: .625rem 1.5rem;
  border: 1px solid var(--color-brand); border-radius: var(--radius-button);
  background: var(--color-brand); color: var(--color-on-brand);
  font: 500 var(--text-sm)/1.4 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  text-align: center; text-decoration: none; white-space: normal;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.main-btn:hover, .btn:hover, .main-btn:active, .btn:active { background: var(--color-brand-hover); color: var(--color-on-brand); border-color: var(--color-brand-hover); }
.main-btn-2, .btn-outline-primary, .btn-outline-secondary, .btn-light {
  background: var(--color-surface); color: var(--color-brand); border-color: var(--color-control-border);
}
.main-btn-2:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-light:hover { background: var(--color-sage); color: var(--color-brand-hover); border-color: var(--color-brand); }
.main-btn:focus-visible, .btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; box-shadow: none; }
.main-btn:disabled, .btn:disabled, .btn.disabled, .main-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.social-btn { width: 44px; height: 44px; padding: 0; }

/* Surfaces have no motion unless they contain an interactive target. */
.card, .single-services, .badge-card, .value-card, .new-additions-item, .surface-card {
  --bs-card-bg: var(--color-surface); --bs-card-color: var(--color-text);
  --bs-card-border-color: var(--color-border); --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: var(--radius-lg); --bs-card-spacer-x: var(--space-5); --bs-card-spacer-y: var(--space-5);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.surface-card, .single-services, .value-card { padding: var(--space-6); }
.chip, .badge-soft { display: inline-flex; gap: var(--space-2); align-items: center; padding: .3rem .75rem; border-radius: var(--radius-pill); background: var(--color-sage); color: var(--color-brand); font-size: var(--text-sm); font-weight: 600; }
.modal-content { --bs-modal-bg: var(--color-surface); --bs-modal-border-color: var(--color-border); --bs-modal-border-radius: var(--radius-lg); }

/* Forms for future page work: labels and help text remain visible. */
.form-label { font-weight: 600; margin-bottom: var(--space-2); }
.form-control, .form-select {
  min-height: 44px; padding: .65rem .875rem; border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm); background-color: var(--color-surface); color: var(--color-text);
  font: inherit;
}
.form-control::placeholder { color: var(--color-muted); opacity: 1; }
.form-control:focus, .form-select:focus { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-focus); outline: 3px solid var(--color-focus); outline-offset: 2px; box-shadow: none; }
.form-control:disabled, .form-select:disabled { background-color: var(--color-surface-soft); cursor: not-allowed; }
.form-control[aria-invalid="true"] { border-color: var(--color-error); }
.form-text { color: var(--color-muted); font-size: var(--text-sm); }
.field-error { color: var(--color-error); font-size: var(--text-sm); }
.notice { padding: var(--space-5); background: var(--color-sage); border-left: 3px solid var(--color-brand); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}