/*
 * brand-identity.css — Habitation Realty.
 *
 * No DTCG export for this build (the designer's file binds its colours to
 * variables, but the Variables API is Enterprise only). The values below
 * are read from the Figma file (ePU1opiEZTW5NmrXabEwSm, version
 * 2411005051577086219): the ramps from the Style Sheet frame (10:11, also
 * "Habitation Realty - Style Sheet - 3"), and two colours the frames use
 * that the style sheet doesn't show, flagged for the designer:
 *   #467C88  deep teal: section sub-lines, card titles, primary buttons,
 *            the top strip, the footer, FAQ questions.
 *   #A0636A  deep rose: secondary buttons.
 * The style sheet's slate pair (#AABAC2, #7D95A1) is used nowhere in the
 * frames and is left out.
 *
 * Loads after the parent stylesheet and before this theme's style.css.
 */

/* ==== GENERATED, converter output replaces everything in this section ==== */

:root {
	/* (no export yet) */
}

/* ==== OVERRIDES, hand written, survives converter re-runs ==== */

:root {

	/* ---- Primitives (Figma Style Sheet 10:11) ------------------------- */

	/* Teal */
	--primary-100: #E0E9E9;
	--primary-200: #D3E8ED;
	--primary-300: #84C0CE;
	--primary-400: #77ABB7;

	/* Rose */
	--secondary-100: #F0EBEB;
	--secondary-200: #EDD3D6;
	--secondary-300: #D99EA4;
	--secondary-400: #B8777E;

	/* Neutral */
	--neutral-100: #E8E9E9;
	--neutral-200: #B7B8B9;
	--neutral-300: #6D6E70;
	--neutral-400: #1E2023;

	/* The frames' two deep colours (not on the style sheet). Accent is the
	   parent's CTA and link ramp, so the deep teal sits at its 300. */
	--hr-teal-deep: #467C88;
	--hr-rose-deep: #A0636A;

	--accent-100: var(--primary-100);
	--accent-200: var(--primary-300);
	--accent-300: var(--hr-teal-deep);
	--accent-400: var(--hr-teal-deep);

	/* ---- Semantics ------------------------------------------------------ */

	--text-primary: var(--neutral-400);
	--text-secondary: var(--neutral-300);
	--text-accent: var(--hr-teal-deep);
	--surface-subtle: var(--neutral-100);
	--border-default: var(--primary-300);
	--border-brand: var(--primary-400);
	--border-focus: var(--hr-teal-deep);

	--cta-default: var(--hr-teal-deep);
	--cta-hover: transparent;
	--cta-text: var(--white);

	--color-heading: var(--neutral-400);

	/* ---- Type (Figma text styles) ----------------------------------------
	   Headings, nav and buttons Yeseva One 400; body Josefin Sans 400.
	   The style sheet says H1 60 / H2 40; the frames use 40 for page titles
	   and the hero, 30 for section headings: built to the frames. */

	--font-family-heading: "Yeseva One", Georgia, serif;
	--font-family-body: "Josefin Sans", "Helvetica", sans-serif;
	--font-family-button: "Yeseva One", Georgia, serif;

	--font-size-h1: clamp(32px, 4vw, 40px);
	--font-size-h2: clamp(26px, 3vw, 30px);
	--font-size-h3: clamp(24px, 2.4vw, 30px);
	--font-size-h4: 18px;
	--font-size-h5: 17px;

	--font-size-body: 16px;
	--font-size-small: 14px;

	--line-height-heading: 1.2;
	--line-height-body: 1.75;

	/* ---- Buttons (Figma "Primary Button" 4001:223 / "Secondary" 4002:101):
	   44 tall, 10/20 padding, 5 radius, Yeseva One 16/24; hover = outline. */

	--btn-radius: 5px;
	--btn-padding-y: 10px;
	--btn-padding-x: 20px;
	--btn-bg: var(--hr-teal-deep);
	--btn-text: var(--white);
	--btn-bg-hover: transparent;
	--btn-text-hover: var(--hr-teal-deep);

	/* ---- Layout: 1152 content at 1440 (144 each side) ------------------- */

	--content-max-width: 1152px;
	--content-width-normal: 1152px;
	--content-width-wide: 1152px;

	/* ---- Spacing (Figma: sections pad 50; intro to items 28) ------------ */

	--hr-space-section: 50px;
	--hr-space-stack: 28px;
	--margin-vertical-normal: var(--hr-space-section);
	--margin-vertical-wide: var(--hr-space-section);
	--margin-vertical-wider: var(--hr-space-section);

	/* ---- Photo overlays: flat black (hero and page header 55%, Let's Talk
	   40%; per block values are stored 0-100 on the block). ------------- */

	--tint-color: #000000;
	--tint-opacity: 0.55;
}