/* Morningside tokens: brand book §09, verbatim names. Day palette on :root,
   campfire palette under [data-mode="offline"] (set on <html> by site.js). */
:root {
	/* Brand palette */
	--m-forest:  #2C4C3B;  /* text, panels, logo */
	--m-mustard: #D4B872;  /* primary CTA, drop tags */
	--m-denim:   #6B8299;  /* Trails, secondary panels */
	--m-terra:   #B76E58;  /* kickers, highlights, Explore */
	--m-oat:     #F4F1EA;  /* page background */
	--m-surface: #EAE3D4;  /* cards, section fills */
	--m-line:    rgba(44,76,59,.2);
	--m-panel:   #2C4C3B;  /* the one dark panel per screen */
	--m-on-panel:#F4F1EA;
	--m-photo:   #DDD5C4;  /* empty image slot */
	--m-postcard:#FBF8F2;

	/* AA text variants (deviation, see CHECKLIST.md): brand Terracotta is
	   3.46:1 on Oatmilk and Denim is 3.53:1 under Oatmilk, both below AA for
	   text under 24px. Small kickers/links use accent-600/700; the Denim
	   panel uses a deeper denim so 17px body text passes (4.95:1). */
	--m-terra-text: #9E5A46;      /* small terracotta text on Oatmilk */
	--m-terra-text-2: #84493A;    /* small terracotta text on Surface */
	--m-denim-panel: #566A7E;
	--m-on-denim: #F4F1EA;

	/* Fixed brand constants (badges, CTA text) — do not swap in offline mode */
	--m-forest-fixed: #2C4C3B;
	--m-oat-fixed:    #F4F1EA;

	/* Organic DS overrides */
	--color-bg: var(--m-oat);
	--color-text: var(--m-forest);
	--color-surface: var(--m-surface);
	--color-accent: var(--m-terra);
	--color-accent-600: #9E5A46;
	--color-accent-700: #84493A;
	--color-divider: var(--m-line);

	/* Type */
	--font-heading: "Caprasimo", system-ui, sans-serif;
	--font-body: "Figtree", system-ui, sans-serif;

	/* Shape */
	--radius-card: 28px;  --radius-section: 40px;  --radius-pill: 999px;
	--radius-arch: 200px 200px 28px 28px;
	--radius-panel: 64px;

	--ms-focus: 2px solid #B76E58;
	--ms-wash: saturate(.6) contrast(.85) brightness(1.1);
}

[data-mode="offline"] {
	--m-oat: #17120E;  --m-forest: #F1E6D0;  --m-surface: #241C16;
	--m-mustard: #E4C47C;  --m-terra: #E09478;  --m-denim: #8FA6BD;
	--m-line: rgba(241,230,208,.18);
	--m-panel: #0E1511;  --m-on-panel: #F1E6D0;  --m-photo: #2E251D;
	--m-postcard: #241C16;
	--m-terra-text: #E09478;  --m-terra-text-2: #E09478;
	--m-denim-panel: #3A4A5A;  --m-on-denim: #F1E6D0;
	--ms-focus: 2px solid #E09478;
	--ms-wash: saturate(.6) contrast(.85) brightness(1.1) brightness(.72) sepia(.35);
}