/*
 * FRAME design tokens, v1.0
 * The modern professional: near-monochrome cool greys, the logo's navy as
 * the ink, the logo's blue as the single accent, Manrope throughout,
 * 8px buttons, 6px cards, hairline rules.
 *
 * Same variable contract as porch-tokens.css: every custom property name
 * is identical, only the values change, so porch-base.css,
 * porch-components.css and every Bricks template read FRAME values
 * without a line of their own changing. The "green" names are role
 * names from the PORCH authoring language, not colors.
 *
 * Brand inputs (measured from the Equity ResQ logo, 2026-10-08):
 *   ink navy   #002858
 *   accent     #045cdc
 * Every other color below is derived from those two or is a neutral.
 */

:root {
	/* Ink and accent (PORCH role names: brand/deep = ink, cta = accent) */
	--porch-brand-green: #002858;        /* headings, ink */
	--porch-cta-green: #045cdc;          /* buttons, links, step markers */
	--porch-cta-green-hover: #0349b0;    /* accent, darkened */
	--porch-deep-green: #002858;         /* dark surfaces: header, footer, dark bands */
	--porch-uplift-green: #0d3a72;       /* lifted navy for dark-on-dark cards */
	--porch-light-green: #e9f0fd;        /* accent tint, 10 percent on white */

	/* Trust accent: FRAME has one accent, so trust reads in the same blue */
	--porch-trust-blue: #045cdc;
	--porch-trust-blue-light: #e9f0fd;

	/* Surfaces */
	--porch-white: #ffffff;
	--porch-neutral-warm: #f7f8fb;   /* primary page canvas (cool near-white) */
	--porch-ceramic: #eef1f6;         /* zone separator wash */
	--porch-black: #000000;           /* reserved for phone CTA only */

	/* Text (navy-leaning greys from the mockup) */
	--porch-text-black: #2b3447;
	--porch-text-black-soft: #5c6a82;
	--porch-text-white: rgba(255, 255, 255, 1);
	--porch-text-white-soft: rgba(255, 255, 255, 0.70);

	/* Semantic / functional */
	--porch-success: #045cdc;
	--porch-error: #c82014;
	--porch-warning: #b7791f;
	--porch-info: #045cdc;

	/* Form borders (also the hairline rule color) */
	--porch-input-border: #dfe4ee;
	--porch-input-valid-bg: rgba(233, 240, 253, 0.5);

	/* Alpha ladders, black */
	--porch-black-06: rgba(0, 0, 0, 0.06);
	--porch-black-14: rgba(0, 0, 0, 0.14);
	--porch-black-24: rgba(0, 0, 0, 0.24);
	--porch-black-34: rgba(0, 0, 0, 0.34);
	--porch-black-44: rgba(0, 0, 0, 0.44);
	--porch-black-54: rgba(0, 0, 0, 0.54);
	--porch-black-64: rgba(0, 0, 0, 0.64);
	--porch-black-74: rgba(0, 0, 0, 0.74);
	--porch-black-87: rgba(0, 0, 0, 0.87);
	--porch-black-90: rgba(0, 0, 0, 0.90);

	/* Alpha ladders, white */
	--porch-white-10: rgba(255, 255, 255, 0.10);
	--porch-white-20: rgba(255, 255, 255, 0.20);
	--porch-white-30: rgba(255, 255, 255, 0.30);
	--porch-white-40: rgba(255, 255, 255, 0.40);
	--porch-white-50: rgba(255, 255, 255, 0.50);
	--porch-white-60: rgba(255, 255, 255, 0.60);
	--porch-white-70: rgba(255, 255, 255, 0.70);
	--porch-white-80: rgba(255, 255, 255, 0.80);
	--porch-white-90: rgba(255, 255, 255, 0.90);

	/* Type families: one geometric sans for everything, no serif voice */
	--porch-font-sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--porch-font-serif: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Type scale (desktop) */
	--porch-fs-display: 3.5rem;        /* 56px */
	--porch-fs-h1: 2.5rem;             /* 40px */
	--porch-fs-h2: 2rem;               /* 32px */
	--porch-fs-h3: 1.5rem;             /* 24px */
	--porch-fs-h4: 1.25rem;            /* 20px */
	--porch-fs-body-large: 1.1875rem;  /* 19px */
	--porch-fs-body: 1rem;             /* 16px */
	--porch-fs-small: 0.875rem;        /* 14px */
	--porch-fs-micro: 0.8125rem;       /* 13px */

	/* Line heights (headlines sit a touch tighter than PORCH) */
	--porch-lh-display: 1.05;
	--porch-lh-h1: 1.1;
	--porch-lh-h2: 1.15;
	--porch-lh-h3: 1.3;
	--porch-lh-h4: 1.4;
	--porch-lh-body: 1.6;
	--porch-lh-small: 1.5;

	/* Letter spacing */
	--porch-ls-display: -0.025em;
	--porch-ls-tight: -0.01em;

	/* Font weights (Manrope carries 200..800; 800 is the display weight) */
	--porch-fw-regular: 400;
	--porch-fw-medium: 500;
	--porch-fw-semibold: 600;
	--porch-fw-bold: 700;

	/* Spacing scale (rem-based, anchored at 16px = 1rem) */
	--porch-space-1: 0.25rem;   /* 4px */
	--porch-space-2: 0.5rem;    /* 8px */
	--porch-space-3: 1rem;      /* 16px */
	--porch-space-4: 1.5rem;    /* 24px */
	--porch-space-5: 2rem;      /* 32px */
	--porch-space-6: 3rem;      /* 48px */
	--porch-space-7: 4rem;      /* 64px */
	--porch-space-8: 5rem;      /* 80px */
	--porch-space-9: 6rem;      /* 96px */

	/* Container widths */
	--porch-container-narrow: 720px;
	--porch-container-default: 1200px;
	--porch-container-wide: 1400px;

	/* Outer gutters per breakpoint */
	--porch-gutter-mobile: 16px;
	--porch-gutter-tablet: 24px;
	--porch-gutter-desktop: 40px;
	--porch-gutter: var(--porch-gutter-mobile);

	/* Border radius scale: sharp grid, no pills */
	--porch-radius-badge: 4px;
	--porch-radius-input: 8px;
	--porch-radius-card: 6px;
	--porch-radius-pill: 8px;
	--porch-radius-circle: 50%;

	/* Elevation: hairlines carry most of the structure, shadows stay faint and cool */
	--porch-shadow-card: 0 0 0 1px rgba(0, 40, 88, 0.08);
	--porch-shadow-card-emphasis: 0 4px 16px rgba(0, 40, 88, 0.06);
	--porch-shadow-card-hover: 0 8px 24px rgba(0, 40, 88, 0.10);
	--porch-shadow-header-scrolled: 0 1px 0 rgba(0, 40, 88, 0.10);
	--porch-shadow-sticky-bar: 0 -1px 0 rgba(0, 40, 88, 0.12);
	--porch-shadow-modal: 0 16px 48px rgba(0, 40, 88, 0.16);

	/* Motion */
	--porch-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--porch-dur-fast: 0.2s;
	--porch-dur-image: 0.3s;

	/* Component-level button geometry (also referenced by Bricks templates) */
	--porch-btn-padding-y-desktop: 14px;
	--porch-btn-padding-x: 28px;
	--porch-btn-padding-y-mobile: 16px;
	--porch-btn-touch-min: 44px;
}

/* Tablet gutter */
@media (min-width: 640px) {
	:root {
		--porch-gutter: var(--porch-gutter-tablet);
	}
}

/* Desktop gutter */
@media (min-width: 1024px) {
	:root {
		--porch-gutter: var(--porch-gutter-desktop);
	}
}

/* Mobile down-shifts for display and major headings, same steps as PORCH. */
@media (max-width: 767px) {
	:root {
		--porch-fs-display: 2.5rem;  /* 40px */
		--porch-fs-h1: 2rem;         /* 32px */
		--porch-fs-h2: 1.5rem;       /* 24px */
	}
}

/* Review stars (PHP-rendered testimonial markup reads this with a PORCH
   gold fallback). FRAME has one accent, so stars read in the accent. */
:root {
	--porch-gold: #045cdc;
}