/*
 * FILE: assets/css/variables.css
 * PURPOSE: Brand design tokens (colors, fonts, radii, shadows, spacing).
 * ----------------------------------------------------------------------------
 * Carried over verbatim from the source site's :root palette. To rebrand,
 * change the hex values here — every other stylesheet reads these variables.
 */

:root {
  /* ---- Brand palette ---- */
  --navy: #1a374b;        /* primary — headers, headings, footer, buttons */
  --navy-deep: #12293a;   /* darker navy for footer/hover */
  --green: #63ac5e;       /* brand accent — the "Wellness" green + leaves */
  --green-deep: #4e8c4a;  /* green hover */
  --clay: #c9704f;        /* warm terracotta accent, used sparingly */
  --cream: #faf6ef;       /* warm page background (never pure white) */
  --sand: #f1e9da;        /* card / alternating section background */
  --ink: #23323b;         /* body text */
  --line: #e4dbcb;        /* hairline borders */
  --white: #ffffff;
  --muted: #5c6b73;       /* muted body text */

  /* ---- Fonts ---- */
  --font-display: "Playfair Display", ui-serif, Georgia, serif;
  --font-body: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---- Radii ---- */
  --radius: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.75rem;
  --radius-full: 9999px;

  /* ---- Shadows (brand soft shadow) ---- */
  --shadow-brand: 0 10px 30px -12px rgba(26, 55, 75, 0.18), 0 2px 8px -4px rgba(26, 55, 75, 0.12);
  --shadow-hover: 0 20px 40px -16px rgba(26, 55, 75, 0.28);

  /* ---- Layout ---- */
  --container: 72rem;      /* max-w-6xl */
  --container-pad: 1.5rem; /* px-6 */

  /* ---- Transitions ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}