/*
 * PORCH design tokens, v1.0
 * Single source of truth for every color, font, space, radius, shadow,
 * and breakpoint in the REInvest OS seller-facing surface.
 *
 * Every Bricks component, every utility class, and every block-level rule
 * references these custom properties by name. Never hardcode a hex value
 * in a component. If a value isn't here, it doesn't belong in PORCH.
 */

:root {
	/* Brand greens (four-tier system) */
	--porch-brand-green: #006241;
	--porch-cta-green: #00754A;
	--porch-cta-green-hover: #005f3c;
	--porch-deep-green: #1E3932;
	--porch-uplift-green: #2b5148;
	--porch-light-green: #d4e9e2;

	/* Trust accent (used only for BBB / press / accreditation) */
	--porch-trust-blue: #1B4D8C;
	--porch-trust-blue-light: #E8EEF7;

	/* Surfaces */
	--porch-white: #ffffff;
	--porch-neutral-warm: #f2f0eb;   /* primary page canvas */
	--porch-ceramic: #edebe9;         /* zone separator wash */
	--porch-black: #000000;           /* reserved for phone CTA only */

	/* Text */
	--porch-text-black: rgba(0, 0, 0, 0.87);
	--porch-text-black-soft: rgba(0, 0, 0, 0.58);
	--porch-text-white: rgba(255, 255, 255, 1);
	--porch-text-white-soft: rgba(255, 255, 255, 0.70);

	/* Semantic / functional */
	--porch-success: #00754A;
	--porch-error: #c82014;
	--porch-warning: #cba258;
	--porch-info: #1B4D8C;

	/* Form borders */
	--porch-input-border: #d6dbde;
	--porch-input-valid-bg: rgba(212, 233, 226, 0.33);

	/* 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 */
	--porch-font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--porch-font-serif: "Lora", "Iowan Old Style", Georgia, 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 */
	--porch-lh-display: 1.1;
	--porch-lh-h1: 1.15;
	--porch-lh-h2: 1.2;
	--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.02em;
	--porch-ls-tight: -0.01em;

	/* Font weights */
	--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 */
	--porch-radius-badge: 4px;
	--porch-radius-input: 8px;
	--porch-radius-card: 12px;
	--porch-radius-pill: 50px;
	--porch-radius-circle: 50%;

	/* Elevation */
	--porch-shadow-card: 0 0 0.5px rgba(0, 0, 0, 0.14), 0 1px 1px rgba(0, 0, 0, 0.24);
	--porch-shadow-card-emphasis: 0 4px 16px rgba(0, 0, 0, 0.08);
	--porch-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
	--porch-shadow-header-scrolled: 0 1px 3px rgba(0, 0, 0, 0.08);
	--porch-shadow-sticky-bar: 0 -2px 8px rgba(0, 0, 0, 0.15);
	--porch-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18);

	/* 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: 32px;
	--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.
 * Per PORCH section 3: Display 56 -> 40, H1 40 -> 32, H2 32 -> 24 on screens below 768px.
 * Body stays at 16px so legibility never degrades on a phone.
 */
@media (max-width: 767px) {
	:root {
		--porch-fs-display: 2.5rem;  /* 40px */
		--porch-fs-h1: 2rem;         /* 32px */
		--porch-fs-h2: 1.5rem;       /* 24px */
	}
}