/**
 * PropOffice Design System — the semantic vocabulary every Design paints with.
 *
 * This file declares the NEUTRAL DEFAULTS, and nothing else. It is the floor:
 * what a PropOffice component looks like on a site that has expressed no brand
 * of its own, and what it still looks like if the runtime layer never runs.
 *
 * The website's actual brand arrives as an inline rule emitted by
 * DesignSystemAssets, which is attached to this same handle and therefore
 * always wins. So the order is: these defaults, then Elementor's globals, then
 * anything the design-system filter supplies.
 *
 * The values below are duplicated from DesignTokens::defaultColors() and
 * ::defaultTypography() — deliberately, because a stylesheet cannot call PHP —
 * and a test asserts the two agree, so drift is a failing build rather than a
 * silent difference between the fallback and the runtime.
 *
 * These are ROLES. Nothing here is a PropOffice brand colour; they are chosen
 * to be legible and unopinionated on an unconfigured site.
 */

:root {
	--po-ds-color-primary: #13245a;
	/* The ink that goes ON the primary. Not derivable from it, so it is a
	   role of its own — a design asking for a button's label cannot know
	   whether the ground under it came out light or dark. */
	--po-ds-color-on-primary: #ffffff;
	--po-ds-color-secondary: #334155;
	--po-ds-color-accent: #c8102e;
	--po-ds-color-text: #0f172a;
	--po-ds-color-muted: #64748b;
	--po-ds-color-background: #eef1f6;
	--po-ds-color-surface: #ffffff;
	--po-ds-color-border: #e2e8f0;

	/* Inherit rather than name a face: a site that configured a font has
	   already said what it wants, and naming one here would win. */
	--po-ds-font-family: inherit;
	/* 🚨 A THIRD family role, and the only one that names a KIND of face rather
	   than a weight. Editorial writing — an article's own title — is set apart
	   from the interface around it on every publication there has ever been,
	   and a site that has chosen a serif for that has said something a weight
	   cannot express. It inherits like the others when nobody has chosen. */
	--po-ds-font-editorial: inherit;

	/*
	 * 🚨 HOW TALL THE PAGE'S HEADER IS, AND WHY IT IS A ROOT TOKEN.
	 *
	 * Two components need this number and neither owns it. The site header IS
	 * that tall; a hero asked to fill the first screen has to subtract it, and
	 * a hero cannot read a value declared on a header it is not inside — CSS
	 * custom properties inherit down, never sideways.
	 *
	 * Declared here, both read the same number and it can only be changed in
	 * one place. A hero that carried its own copy would be a second answer to
	 * how tall the header is, and the day somebody changed one the first
	 * screen would be wrong by the difference.
	 *
	 * The two values are the reference's own, and so is the breakpoint they
	 * change at — see the site header for why 1366 and not a round number.
	 */
	--po-ds-header-height: 56px;

	/*
	 * 🚨 THE PAGE'S MEASURE IS THREE VALUES AND ONE OF THEM IS NOT A WIDTH.
	 * Measured on the reference: 1088 at and above 1366, a flat 960 from 1024
	 * to 1365, and the whole page below that. The middle value is the one
	 * nobody guesses — at 1200 the reference is NOT 1088 and NOT 1168, it is
	 * 960, the same measure it uses at 1024. Components read this token, so
	 * they all change measure together rather than each carrying a literal.
	 */
	--po-ds-container: 1088px;
	--po-ds-font-heading: 600;
	--po-ds-font-body: 400;
	--po-ds-font-label: 500;
	--po-ds-font-button: 600;

	/*
	 * ── Property Detail roles ─────────────────────────────────────────────
	 *
	 * Measured from the reference property page and LOCKED. Declared HERE, at
	 * the boundary, because a design may never name a face or a brand value of
	 * its own — it asks for a role and the boundary answers.
	 *
	 * 🚨 These deliberately do NOT feed `--po-ds-font-family`, which stays
	 * `inherit`. A site that configured a font has said what it wants, and
	 * every other PropOffice surface still takes it. Only the Property Detail
	 * roles below are opinionated, and only the property page consumes them —
	 * so nothing here changes the website's own typography or any other page.
	 *
	 *   display  the price and the marketing headline
	 *   text     titles, body, labels
	 *   ink      primary text
	 *   muted    secondary metadata
	 *   accent   the price
	 *
	 * A site that wants its own still overrides these through the
	 * design-system filter, exactly like every other role.
	 */
	--po-type-display: Oswald, Helvetica, Arial, sans-serif;
	--po-type-text: Inter, Helvetica, Arial, sans-serif;
	--po-type-ink: #14181E;
	--po-type-muted: #6B7686;
	--po-type-accent: #B10028;

	/*
	 * ── Roles designs already consumed, declared at last ─────────────────
	 *
	 * Each of these was read by a design through a `var()` with a literal fallback while
	 * nothing declared it, so every page rendered the fallback and no site
	 * could reach it. Declared here, each value IS that fallback — identical
	 * at every call site — so nothing renders differently; the role simply
	 * exists now. They are not brand roles: the runtime layer does not emit
	 * them, and the PHP defaults do not list them.
	 */
	--po-ds-color-heading: #14181e;
	--po-ds-color-muted-surface: #f8fafc;
	--po-ds-color-on-accent: #ffffff;
	--po-ds-font-text: inherit;
	--po-ds-text-xs: 12px;
	--po-ds-text-md: 16px;
	--po-ds-text-2xl: 32px;
	--po-ds-weight-semibold: 600;
	--po-ds-weight-bold: 700;
	--po-ds-space-05: 4px;
	--po-ds-space-2: 16px;
	--po-ds-space-3: 24px;
	--po-ds-space-4: 32px;
	--po-ds-radius-sm: 4px;
	--po-ds-radius-lg: 12px;
}

/*
 * The header is taller on a wide screen, so anything subtracting it changes
 * too. One media query, one number, every reader.
 */
@media (min-width: 1366px) {
	:root {
		--po-ds-header-height: 104px;
	}
}

/*
 * Between 1024 and 1365 the reference holds a 960 measure however much room
 * the page has, and below 1024 it gives the measure up entirely. Both are the
 * same rule seen twice: the page is 960 wide until 960 is more than it has.
 */
@media (min-width: 1024px) and (max-width: 1365px) {
	:root {
		--po-ds-container: 960px;
	}
}

@media (max-width: 1023px) {
	:root {
		--po-ds-container: 100%;
	}
}