/* ============================================================================
   Sarah Erin Thole CNHP — design tokens
   Ported verbatim from the Claude Design system
   "sarah-erin-thole-cnhp-design-system-504f2711-701e-4b07-b659-8efcad36cf5c"
   (tokens/fonts, colors, typography, spacing, radius, elevation, motion, base).

   Do not hardcode a value that exists here. Change a token, not a page.
   ========================================================================= */

/* --- Webfonts -------------------------------------------------------------
   NOTE (carried over from the design system): the live Showit site does not
   expose its font files. These are Google Fonts stand-ins chosen to match the
   rendered site. Replace with the real families/files when available.        */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&family=Sacramento&display=swap");

:root{
/* --- Base ramp: warm neutrals (paper, linen, sand) --- */
--cream-50:#FCF9F5;--cream-100:#F6F0E7;--cream-200:#EFE6DA;
--sand-300:#EADFD1;--sand-400:#DCCAB6;--sand-500:#C9B49C;
/* --- Base ramp: clay / terracotta (warm accent) --- */
--clay-200:#EFD8CB;--clay-300:#DDB49C;--clay-400:#C89B82;--clay-500:#B07A5E;--clay-600:#8F5F47;
/* --- Base ramp: sage / forest (grounding accent) --- */
--sage-200:#D4D8C8;--sage-300:#A8AE93;--sage-400:#8A9174;--sage-500:#7C8567;--forest-600:#5C6450;--forest-700:#4A5240;
/* --- Base ramp: espresso (ink) --- */
--espresso-600:#6E6055;--espresso-700:#57483F;--espresso-800:#3F362F;--espresso-900:#2E2823;
/* --- Base: rose (soft feminine tint, used sparingly) --- */
--rose-200:#E7CFC6;--rose-300:#D9B0A2;
/* --- Semantic: text --- */
--text-primary:var(--espresso-900);
--text-body:var(--espresso-700);
--text-muted:var(--espresso-600);
--text-inverse:var(--cream-50);
--text-accent:var(--clay-600);
--text-on-deep:var(--cream-100);
/* --- Semantic: surface --- */
--surface-page:var(--cream-50);
--surface-card:#FFFFFF;
--surface-muted:var(--cream-100);
--surface-sand:var(--sand-300);
--surface-deep:var(--forest-700);
--surface-clay:var(--clay-500);
--surface-overlay:rgba(46,40,35,.42);
/* --- Semantic: line --- */
--border-hairline:rgba(46,40,35,.14);
--border-subtle:var(--sand-400);
--border-strong:var(--espresso-900);
--rule-accent:var(--clay-400);
/* --- Semantic: interactive --- */
--action-primary-bg:var(--espresso-900);
--action-primary-fg:var(--cream-50);
--action-primary-bg-hover:var(--clay-600);
--action-secondary-bg:transparent;
--action-secondary-fg:var(--espresso-900);
--action-accent-bg:var(--clay-500);
--action-accent-fg:var(--cream-50);
--focus-ring:var(--clay-500);
/* --- Semantic: status (used only in forms + program UI) --- */
--status-success:var(--sage-500);
--status-warning:var(--clay-500);
--status-error:#9B4A3A;
--status-info:var(--forest-600);

/* --- Typography --- */
--font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
--font-script:"Sacramento","Snell Roundhand",cursive;
--font-sans:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;

--fs-display-1:clamp(3rem,7vw,6rem);
--fs-display-2:clamp(2.5rem,5vw,4.25rem);
--fs-h1:clamp(2rem,3.6vw,3.25rem);
--fs-h2:clamp(1.625rem,2.6vw,2.375rem);
--fs-h3:1.5rem;
--fs-script:clamp(2.25rem,4vw,3.5rem);
--fs-lead:1.1875rem;
--fs-body:1rem;
--fs-small:.875rem;
--fs-eyebrow:.6875rem;
--fs-numeral:clamp(2.5rem,5vw,4.5rem);

--lh-tight:1.05;
--lh-display:1.12;
--lh-heading:1.2;
--lh-body:1.7;
--lh-loose:1.85;

--ls-display:-0.01em;
--ls-heading:0.005em;
--ls-body:0.01em;
--ls-eyebrow:0.34em;
--ls-button:0.18em;

--fw-light:300;
--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;

/* --- Spacing --- */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:160px;
--section-y:clamp(72px,10vw,160px);
--gutter:clamp(20px,5vw,72px);
--measure:64ch;
--measure-narrow:46ch;
--container:1240px;
--container-narrow:820px;

/* --- Radius --- */
--radius-none:0px;
--radius-sm:2px;
--radius-md:4px;
--radius-pill:999px;
--radius-arch:50% 50% 0 0 / 34% 34% 0 0; /* arched photo top, a recurring motif */
--radius-circle:50%;

/* --- Elevation --- */
--shadow-none:none;
--shadow-soft:0 10px 30px -18px rgba(46,40,35,.34);
--shadow-lift:0 22px 48px -26px rgba(46,40,35,.40);
--shadow-photo:0 30px 70px -40px rgba(46,40,35,.55);
--overlay-scrim:linear-gradient(180deg,rgba(46,40,35,0) 40%,rgba(46,40,35,.55) 100%);
--overlay-wash:linear-gradient(180deg,rgba(252,249,245,.86),rgba(252,249,245,.86));

/* --- Motion --- */
--ease-brand:cubic-bezier(.22,.61,.36,1);
--ease-out-soft:cubic-bezier(.16,1,.3,1);
--dur-fast:160ms;
--dur-base:280ms;
--dur-slow:600ms;
--dur-reveal:900ms;
}

@media (prefers-reduced-motion:reduce){:root{
--dur-fast:0ms;
--dur-base:0ms;
--dur-slow:0ms;
--dur-reveal:0ms;
}}

/* --- Base element styles (tokens/base.css) ------------------------------- */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-light);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text-primary);
  font-weight:var(--fw-regular);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  margin:0;
}
p{margin:0;text-wrap:pretty}
a{
  color:var(--text-accent);
  text-decoration:none;
  border-bottom:1px solid var(--border-hairline);
  transition:color var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand);
}
a:hover{color:var(--espresso-900);border-color:var(--espresso-900)}
img{max-width:100%}
::selection{background:var(--clay-200);color:var(--espresso-900)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}