/*
 * MomHop parent-facing design tokens.
 * Single source of truth for the warm-California palette, type, radii, and shadows.
 * Future Settings editing should update values here rather than component CSS.
 */
:root {
	/* Color */
	--mh-cream: #FBF6EF;
	--mh-surface: #FFFFFF;
	--mh-ink: #2C2520;
	--mh-ink-soft: #7A6F64;
	--mh-line: #ECE0D1;
	/* Exact values from the master canonical (docs/design/component_library_MASTER_CANONICAL.html). */
	--mh-coral: #D8694B;
	--mh-coral-deep: #BF563B;
	--mh-coral-soft: #FBE7DD;
	--mh-coral-tint: #FCEEE7;
	--mh-coral-faint: #FDF5F1;
	--mh-sage: #3C7E60;
	--mh-sage-soft: #E3EEE6;
	--mh-sage-tint: #EDF4EF;
	--mh-plum: #8A6BA8;
	--mh-ink-70: color-mix(in srgb, var(--mh-ink) 70%, transparent);
	--mh-ink-55: color-mix(in srgb, var(--mh-ink) 55%, transparent);
	--mh-ink-40: color-mix(in srgb, var(--mh-ink) 40%, transparent);
	--mh-hairline: color-mix(in srgb, var(--mh-ink) 14%, transparent);
	--mh-tag-border: color-mix(in srgb, var(--mh-ink) 20%, transparent);
	--mh-sun: #E4A24C;
	--mh-sun-text: #B07A28;
	--mh-sky: #5C93B0;
	--mh-soon: #C6B9A8;

	/* Type */
	--mh-display-font: "Fraunces", Georgia, serif;
	--mh-ui-font: "Hanken Grotesk", system-ui, sans-serif;
	--mh-hand-font: "Caveat", "Segoe Print", cursive; /* a word or two of handwriting (About page, 2026-10-23) */

	/* Type scale (2026-10-03). New CSS uses only these sizes. */
	--mh-fs-micro: 11px;   /* eyebrows, badges, meta */
	--mh-fs-small: 12.5px; /* tags, buttons, captions */
	--mh-fs-action: 11.5px; /* four-up detail action bar: the largest size where four labels fit one row at 360px */
	--mh-fs-body: 14px;    /* body copy */
	--mh-fs-lead: 16px;    /* card titles, lead text */
	--mh-fs-h3: 19px;      /* section headings */
	--mh-fs-h2: 22px;      /* sheet / panel titles */
	--mh-fs-h1: 26px;      /* page titles (canonical .mh-h1) */
	--mh-fw-ui: 400;
	--mh-fw-ui-strong: 600;
	--mh-fw-display: 600;

	/* Radius */
	--mh-r: 18px;
	--mh-r-sm: 12px;
	--mh-r-xs: 9px;

	/* Shadow */
	/* A touch deeper since the page went white (owner 2026-10-17: "a very small increase in shadow"). */
	--mh-sh-1: 0 1px 2px color-mix(in srgb, var(--mh-ink) 8%, transparent), 0 6px 16px color-mix(in srgb, var(--mh-ink) 8%, transparent);
	--mh-sh-card: 0 1px 3px color-mix(in srgb, var(--mh-ink) 7%, transparent),0 8px 24px color-mix(in srgb, var(--mh-ink) 8%, transparent);
	--mh-card-shadow: var(--mh-sh-card);

	/* Shell metrics derived from the shell contract. */
	--mh-appbar-h: 56px;
	--mh-nav-h: 64px;
	--mh-content-cap: 1180px;
	--mh-nav-edge: 14px;
	--mh-nav-bottom: 15px;
	--mh-nav-clearance: calc(var(--mh-nav-h) + var(--mh-nav-bottom) + env(safe-area-inset-bottom, 0px) + 8px); /* owner 2026-10-23: pages scrolled into empty space; was + 36px */

	/* Compatibility aliases for already-built parent-facing components. */
	--mh-cream-2: #F4EADD;
	--mh-surface-2: #FFFCF7;
	--mh-ink-faint: #A89D90;
	--mh-line-soft: #F3ECE0;
	--mh-line-strong: var(--mh-line);
	--mh-muted: var(--mh-ink-soft);
	--mh-sun-soft: #F8EAD6;
	--mh-sky-soft: #E1EEF3;
	/* The grey Google's attribution rules name for the words "Google Maps". Not a palette colour: a palette must not change it. */
	--mh-google-credit: #5E5E5E;
	--mh-r-lg: 24px;
	--mh-r-xl: 30px;
	--mh-r-pill: 999px;
	--mh-r-md: var(--mh-r);
	--mh-card-radius: var(--mh-r);
	--mh-card-pad: 13px;
	--mh-sh-card-legacy: var(--mh-sh-card);
	--mh-sh-2: 0 8px 22px -12px color-mix(in srgb, var(--mh-ink) 30%, transparent);
	--mh-sh-float: 0 6px 24px color-mix(in srgb, var(--mh-ink) 16%, transparent),0 2px 6px color-mix(in srgb, var(--mh-ink) 10%, transparent);
	--mh-space-1: 4px;
	--mh-space-2: 8px;
	--mh-space-3: 12px;
	--mh-space-4: 16px;
	--mh-space-5: 24px;
	--mh-space-6: 32px;
	--mh-space-7: 48px;
	--mh-space-8: 64px;
	/* Locked component-library aliases: bare names resolve to the MomHop-prefixed source tokens. */
	--cream: var(--mh-cream);
	--surface: var(--mh-surface);
	--ink: var(--mh-ink);
	--sage: var(--mh-sage);
	--coral: var(--mh-coral);
	--coral-deep: var(--mh-coral-deep);
	--coral-tint: var(--mh-coral-tint);
	--coral-soft: var(--mh-coral-soft);
	--coral-faint: var(--mh-coral-faint);
	--sage-tint: var(--mh-sage-tint);
	--sage-soft: var(--mh-sage-soft);
	--ink-70: var(--mh-ink-70);
	--ink-55: var(--mh-ink-55);
	--ink-40: var(--mh-ink-40);
	--hairline: var(--mh-hairline);
	--tag-border: var(--mh-tag-border);
	--sh-1: var(--mh-sh-1);
	--card-radius: var(--mh-card-radius);
	--card-pad: var(--mh-card-pad);
	--card-shadow: var(--mh-card-shadow);
	--r-xl: var(--mh-r-lg);
	--disp: var(--mh-display-font);
	--body: var(--mh-ui-font);
	--mh-display: var(--mh-display-font);
	--mh-font-display: var(--mh-display-font);

	--momhop-cream: var(--mh-cream);
	--momhop-cream-deep: var(--mh-cream-2);
	--momhop-surface: var(--mh-surface);
	--momhop-ink: var(--mh-ink);
	--momhop-ink-soft: var(--mh-ink-soft);
	--momhop-ink-faint: var(--mh-ink-faint);
	--momhop-line: var(--mh-line);
	--momhop-line-soft: var(--mh-line-soft);
	--momhop-coral: var(--mh-coral);
	--momhop-coral-deep: var(--mh-coral-deep);
	--momhop-coral-soft: var(--mh-coral-soft);
	--momhop-coral-tint: var(--mh-coral-tint);
	--momhop-coral-faint: var(--mh-coral-faint);
	--momhop-sage: var(--mh-sage);
	--momhop-sage-soft: var(--mh-sage-soft);
	--momhop-sage-tint: var(--mh-sage-tint);
	--momhop-sun: var(--mh-sun);
	--momhop-sky: var(--mh-sky);
	--momhop-sky-soft: var(--mh-sky-soft);
	--momhop-radius-sm: var(--mh-r-sm);
	--momhop-radius-md: var(--mh-r);
	--momhop-radius-lg: var(--mh-r-lg);
	--momhop-radius-xl: var(--mh-r-xl);
	--momhop-shadow-soft: var(--mh-sh-1);
	--momhop-card-shadow: var(--mh-card-shadow);
	--momhop-shadow: var(--mh-sh-2);
	--momhop-space-1: var(--mh-space-1);
	--momhop-space-2: var(--mh-space-2);
	--momhop-space-3: var(--mh-space-3);
	--momhop-space-4: var(--mh-space-4);
	--momhop-space-5: var(--mh-space-5);
	--momhop-space-6: var(--mh-space-6);
	--momhop-display-font: var(--mh-display-font);
	--momhop-display: var(--mh-display-font);
	--momhop-ui-font: var(--mh-ui-font);
	--momhop-ui: var(--mh-ui-font);
	--momhop-muted: var(--mh-ink-soft);
}

/* Detail/bottom-bar stacking contract for the real flat app shell. */
:root {
	--mh-safe-bottom: env(safe-area-inset-bottom, 0px);
	--mh-bottom-nav-h: calc(var(--mh-nav-h) + var(--mh-nav-bottom));
	--mh-actionbar-h: 64px;
	--mh-event-actionbar-h: 112px;
	--mh-detail-actionbar-h: var(--mh-actionbar-h);
	--mh-app-column-w: 384px;
	--mh-detail-inset: 18px;
	--mh-page-gutter: 14px;
}

/* Desktop parent shell tokens. */
:root {
	/* The two side columns are the same width (owner 2026-10-16: "left column width is smaller than right"). */
	--mh-rail-w: 280px;
	--mh-right-w: 280px;
	--mh-center-max: 760px;
	--mh-desktop-bp: 1024px;
	--mh-desktop-shell-max: 1460px;
}