@charset "utf-8";
/****************************************************************************************************************
	MR-A — Design tokens (SSOT)
	BasicFront_View responsive foundation. B~E must reference these only — no page-local @media BP literals.

	Breakpoint note:
	  --bp-sm is the single phone switch (750px). CSS custom properties are NOT valid inside
	  @media() in current browsers, so every @media must use the literal 750px and a
	  sibling comment marking --bp-sm. Changing the phone switch = update this file AND every
	  max-width:750px in layout.css / common.css (shell only until B~E).

	Optional tablet (--bp-md) reserved; unused until a story needs it.

	IMPORTANT: never nest star-slash inside block comments — it terminates the comment early
	and drops :root variables (full-bleed regression).
****************************************************************************************************************/
:root {
	/* --- Breakpoints (documentation + JS/calc consumers) --- */
	--bp-sm: 750px;
	--bp-md: 1024px; /* optional tablet — reserved, not wired yet */

	/* --- Container / gutters --- */
	--container-max: 1200px;
	--page-gutter: 40px;
	--page-gutter-sm: 20px;

	/* --- Modal caps (layerPop) --- */
	--modal-max-lg: 1200px;
	--modal-max-md: 1000px;
	--modal-max-sm: 500px;
	/* default desired width before viewport clamp; pages may override --modal-cap */
	--modal-cap: var(--modal-max-lg);

	/* --- Color. Primary is for CTA, active state, and links. --- */
	--color-primary: #002ae1;
	--color-text: #1a1a2e;
	--color-text-muted: #64748b;
	--color-surface: #ffffff;
	--color-border: #e5e7eb;
	--color-primary-hover: #0122b8;
	--color-primary-soft: #f1f5ff;
	--color-primary-line: #dbe4ff;
	--color-text-sub: #475569;
	--color-text-label: #344054;
	--color-border-strong: #d0d5dd;
	--color-surface-subtle: #f8fafc;
	--color-page-bg: #f6f7fb;
	--color-danger: #d92d20;
	--color-danger-soft: #fef3f2;
	--color-danger-line: #fecdca;
	--color-disabled-bg: #e8ebf2;
	--color-disabled-text: #98a2b3;

	/* --- Shape --- */
	--radius-sm: 8px; /* input */
	--radius-md: 10px; /* button */
	--radius-lg: 12px; /* inner card, list item */
	--radius-xl: 16px; /* page card, modal */
	--shadow-card: 0 1px 2px rgba(16,24,64,.04), 0 16px 40px rgba(16,24,64,.08);
	--shadow-modal: 0 24px 56px rgba(15,23,42,.20);
	--focus-ring: 0 0 0 3px rgba(0,42,225,.12);
	--control-height: 48px;

	/* --- Typography scale --- */
	--font-size-body: 14px; /* body */
	--font-size-label: 12px; /* helper */
	--font-size-title-lg: 28px; /* page title */
	--font-size-title-lg-sm: 18px;
	--font-size-title-md: 16px;
	--font-size-title-md-sm: 12px;
	--font-size-section: 20px; /* section title; no existing step is 20px */
	--font-size-metric: var(--font-size-title-lg-sm); /* card metric reuses 18px */
}

/* Phone gutter — keep in sync with @media max-width:750px (--bp-sm) */
@media screen and (max-width:750px) { /* --bp-sm */
	:root {
		--page-gutter: 20px; /* == --page-gutter-sm; literal avoids nested var issues */
	}
}