/**
 * DESIGN TOKENS — Jean Scott Homes
 * TJS 2026-03-14 — Created
 *
 * Single source of truth for colors, fonts, spacing.
 * Seashore palette: warm coastal feel, premium readability.
 *
 * Usage: var(--jsh-sand) etc. in any stylesheet.
 * Prefix: --jsh- to avoid collisions with Genesis/IDXCentral vars.
 */

:root {
	/* ═══ SEASHORE COLOR PALETTE ═══ */
	--jsh-sand:        #F1EAD6;  /* Page background — warm cream      */
	--jsh-sand-dark:   #E9D9BE;  /* Cards, hover states, accents       */
	--jsh-sea-light:   #9BD4DE;  /* Info highlights, breadcrumb bar    */
	--jsh-sea-mid:     #62B7D2;  /* Secondary accent                   */
	--jsh-ocean:       #1999C2;  /* Brand blue (≈ existing #007db8)    */
	--jsh-sunset:      #EFB982;  /* CTAs, warm accents, hover states   */

	/* ═══ TEXT ═══ */
	--jsh-text:        #111;     /* Primary body text                  */
	--jsh-text-light:  #fff;     /* Text on dark backgrounds           */
	--jsh-text-muted:  #555;     /* Secondary / caption text           */

	/* ═══ TYPOGRAPHY ═══ */
	--jsh-font-heading:  'Cormorant Garamond', Georgia, serif;
	--jsh-font-body:     'Montserrat', system-ui, sans-serif;

	/* ═══ SPACING ═══ */
	--jsh-space-xs:    0.5rem;
	--jsh-space-sm:    1rem;
	--jsh-space-md:    1.5rem;
	--jsh-space-lg:    2rem;
	--jsh-space-xl:    3rem;

	/* ═══ LAYOUT ═══ */
	--jsh-max-width:   1080px;   /* Content max-width                  */
	--jsh-radius:      5px;      /* Border radius                      */
}