/**
 * Design tokens — Deluxe Properties
 *
 * Company standard (from the Deluxe brand kit on the previous site, Elementor
 * kit "Default Kit"): Primary green #005B3A, Secondary #151715, Text #7A7A7A,
 * Accent gold #D8B428, set in Roboto. Colours below follow that kit; where a
 * value is adjusted for accessibility the comment says so.
 *
 * Values are transcribed from the Figma variable collection
 * (file RHHqrxqyV6BJW5X4hGKi8Z). Figma names are kept in comments so a
 * designer can trace any value back to its source variable.
 */

:root {
	/* ---------------------------------------------------------------
	 * Brand — greens
	 * --------------------------------------------------------------- */
	--dp-green-900: #00412a; /* color/spring green/13  · Kaitoke Green */
	--dp-green-700: #005b3a; /* company Primary */
	--dp-green-500: #01784b; /* color/spring green/24 */
	--dp-green-whatsapp: #25d366; /* color/spring green/49 */

	--dp-green-700-a12: rgba(0, 91, 58, 0.12);
	--dp-green-700-a20: rgba(0, 91, 58, 0.2);
	--dp-green-700-a35: rgba(0, 91, 58, 0.35);
	--dp-green-900-a82: rgba(0, 65, 42, 0.82);

	/* ---------------------------------------------------------------
	 * Brand — golds
	 * --------------------------------------------------------------- */
	/*
	 * Company Accent. Gold is the brand's signature — the DELUXE wordmark, the
	 * header CTA, figures and icons — and is used on dark or green grounds.
	 * On white it fails contrast as text, so labels on light grounds use the
	 * Primary green instead (the old site's green label bars).
	 */
	--dp-gold: #d8b428; /* company Accent */
	--dp-gold-soft: #ebd98a; /* hover tint */
	--dp-gold-a45: rgba(216, 180, 40, 0.45);
	--dp-gold-a20: rgba(216, 180, 40, 0.2);

	/* ---------------------------------------------------------------
	 * Neutrals
	 * --------------------------------------------------------------- */
	--dp-white: #ffffff; /* color/white/solid */
	/*
	 * Ground palette, following the company site: white content, a light
	 * neutral grey for secondary bands, near-black for dark sections and the
	 * Primary green for the footer and brand bands. The retired greys all
	 * resolve to the light grey so every template follows suit.
	 */
	--dp-cream: #f5f5f5; /* company light grey (secondary ground) */
	--dp-pampas: var(--dp-cream);
	--dp-off-white: var(--dp-cream);
	--dp-concrete: #ebebeb; /* icon wells */
	--dp-line: #e3e3e3; /* company hairline grey */
	--dp-line-warm: #e3e3e3;
	--dp-line-deep: #d4d4d4;
	--dp-grey-400: #9a9a9a; /* color/grey/60  · Dusty Gray */
	--dp-grey-450: #8c8c88; /* color/grey/54  · Natural Gray */
	--dp-grey-500: #6e6e6e; /* color/grey/43  · Dove Gray */
	--dp-grey-700: #4a4a4a; /* color/grey/29  · Tundora */
	--dp-ink-600: #5f5f5f; /* company Text #7A7A7A, deepened to pass AA as body copy on white */
	--dp-sage: #6b6b6b; /* company Text, AA-safe */
	--dp-ink-300: #2b2b2b; /* color/grey/17  · Mine Shaft */
	--dp-ink-200: #151715; /* company Secondary — dark sections, header */
	--dp-ink-100: #111111; /* color/grey/7 */
	--dp-header-slate: #5b5f58; /* Siam — legacy solid header ground */
	/* The header sits over the hero as a translucent veil, not a solid bar. */
	--dp-header-veil: rgba(21, 23, 21, 0.55); /* Secondary 55% — the company header is dark */
	--dp-danger: #c0392b; /* color/red/46 · Tall Poppy */

	/* ---------------------------------------------------------------
	 * Typography
	 * --------------------------------------------------------------- */
	/*
	 * Roboto is the company typeface (Elementor kit: Primary 600, Text 400,
	 * Accent 500; the DELUXE wordmark is set in 900). One family site-wide; the
	 * three role tokens are kept so templates stay legible.
	 */
	--dp-font-stack: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	--dp-font-display: var(--dp-font-stack);
	--dp-font-sans: var(--dp-font-stack);
	--dp-font-body: var(--dp-font-stack);

	/*
	 * Semantic scale — use these for new work.
	 *   h1 48–64 · section heading 36–44 · subheading 18–20 · body 16–18 ·
	 *   metadata 12–14. Fluid between 390px and 1440px viewports.
	 */
	--dp-fs-h1: clamp(2.5rem, 1.7rem + 3.1vw, 4rem); /* 40 mobile → 64 */
	--dp-fs-h2: clamp(2rem, 1.6rem + 1.55vw, 2.75rem); /* 32 → 44 */
	--dp-fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); /* 22 → 26 */
	--dp-fs-sub: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); /* 18 → 20 */
	--dp-fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16 → 18 */
	--dp-fs-small: 0.9375rem; /* 15 — secondary copy */
	--dp-fs-meta: 0.8125rem; /* 13 — labels, captions */

	/*
	 * Legacy steps. Names are the original Figma pixel sizes; values were lifted
	 * ~15–20% in the 2026 refinement pass so the inner pages (pages.css) grow
	 * with the home page. Nothing on the site now renders below 12px.
	 *
	 * Each step from 15 up is fluid between a 390px phone and a 1440px desktop,
	 * so a rule written as `font-size: var(--dp-text-22)` shrinks on tablets and
	 * phones without needing its own media query. The comment gives the phone →
	 * desktop pixel pair; the desktop end is the value the step always had, so
	 * nothing changes at 1440px and wider. The small steps (11–14-5) are already
	 * at or below 17px and hold their size — shrinking body copy and labels any
	 * further costs more in legibility than it wins in fit.
	 */
	--dp-text-11: 0.75rem; /* 12 */
	--dp-text-11-5: 0.8125rem; /* 13 */
	--dp-text-12: 0.8125rem; /* 13 */
	--dp-text-12-5: 0.875rem; /* 14 */
	--dp-text-13: 0.875rem; /* 14 */
	--dp-text-13-5: 0.9375rem; /* 15 */
	--dp-text-14: 1rem; /* 16 */
	--dp-text-14-5: 1rem; /* 16 */
	--dp-text-15: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem); /* 16 → 17 */
	--dp-text-16: var(--dp-fs-body); /* 16 → 18 */
	--dp-text-17: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem); /* 17 → 19 */
	--dp-text-19-5: clamp(1.1875rem, 1.118rem + 0.29vw, 1.375rem); /* 19 → 22 */
	--dp-text-22: clamp(1.3125rem, 1.22rem + 0.38vw, 1.5625rem); /* 21 → 25 */
	--dp-text-26: clamp(1.5rem, 1.36rem + 0.57vw, 1.875rem); /* 24 → 30 */
	--dp-text-32: clamp(1.6875rem, 1.48rem + 0.86vw, 2.25rem); /* 27 → 36 */
	--dp-text-38: clamp(1.875rem, 1.6rem + 1.14vw, 2.625rem); /* 30 → 42 */
	--dp-text-40: clamp(1.9375rem, 1.64rem + 1.24vw, 2.75rem); /* 31 → 44 */
	--dp-text-44: var(--dp-text-40); /* 31 → 44 */
	--dp-text-46: var(--dp-text-40); /* 31 → 44 — section headings cap at 44 */
	--dp-text-64: var(--dp-fs-h1); /* 40 → 64 */

	/* ---------------------------------------------------------------
	 * Buttons
	 * ---------------------------------------------------------------
	 * Button metrics are fluid on the same 390px → 1440px track as the type
	 * scale, so a button shrinks with its label instead of keeping a desktop
	 * footprint on a phone. The floors are deliberate: 44px of height is the
	 * smallest comfortable touch target, and 13px of uppercase bold is the
	 * smallest label that still reads at arm's length.
	 */
	--dp-btn-h: clamp(44px, 42.5px + 0.38vw, 48px);
	--dp-btn-pad-y: clamp(10px, 9.25px + 0.19vw, 12px);
	--dp-btn-pad-x: clamp(16px, 13px + 0.76vw, 24px);
	--dp-btn-fs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); /* 13 → 14 */
	--dp-btn-gap: clamp(8px, 7.25px + 0.19vw, 10px);
	--dp-btn-icon: clamp(14px, 13.25px + 0.19vw, 16px);
	--dp-btn-track: 0.08em;

	/* The --lg variant, on the same track. */
	--dp-btn-h-lg: clamp(48px, 45px + 0.76vw, 56px);
	--dp-btn-pad-y-lg: clamp(12px, 10.5px + 0.38vw, 16px);
	--dp-btn-pad-x-lg: clamp(20px, 15.5px + 1.14vw, 32px);

	--dp-track-tight: -0.029em; /* letter spacing/-0_46 on display */
	--dp-track-wide: 0.096em; /* letter spacing/1_38 at 11.5px */
	--dp-track-wider: 0.22em; /* letter spacing/2_53 at 11.5px */
	--dp-track-nav: 0.16em; /* letter spacing/2_08 at 13px */

	/* ---------------------------------------------------------------
	 * Spacing / radii / shape
	 * --------------------------------------------------------------- */
	/* 8px grid. xxs is the only half-step, for icon/label gaps. */
	--dp-space-xxs: 4px;
	--dp-space-xs: 8px;
	--dp-space-sm: 16px;
	--dp-space-md: 24px;
	--dp-space-lg: 32px;
	--dp-space-xl: 48px;
	--dp-space-2xl: 64px;
	--dp-space-3xl: 96px;
	--dp-space-4xl: 128px;

	/* Vertical rhythm for every full-width section. */
	--dp-section-y: clamp(48px, 2rem + 3vw, 80px); /* 48 on phones → 80 on wide screens */

	/*
	 * One radius for the whole site — cards, images, buttons, inputs, chips.
	 * The company site uses square-cut buttons and label bars, so it is kept
	 * nearly square. The old steps alias to it; `pill` survives only for true
	 * circles (dots, avatars, round icon buttons).
	 */
	--dp-radius: 2px;
	--dp-radius-xs: var(--dp-radius);
	--dp-radius-sm: var(--dp-radius);
	--dp-radius-md: var(--dp-radius);
	--dp-radius-lg: var(--dp-radius);
	--dp-radius-pill: 999px;

	--dp-border: 1px;
	--dp-border-thick: 1.5px;

	/* ---------------------------------------------------------------
	 * Elevation
	 * --------------------------------------------------------------- */
	/*
	 * Shadows are reserved for interactive elements (property cards, the hero
	 * teaser, primary buttons on hover). Static panels and images sit flat.
	 */
	--dp-shadow-card: 0 1px 2px rgba(21, 23, 21, 0.05), 0 16px 40px -24px rgba(21, 23, 21, 0.3);
	--dp-shadow-card-hover: 0 2px 4px rgba(21, 23, 21, 0.06), 0 28px 56px -28px rgba(21, 23, 21, 0.4);
	--dp-shadow-feature: var(--dp-shadow-card);
	--dp-shadow-panel: none;

	/* ---------------------------------------------------------------
	 * Layout
	 * --------------------------------------------------------------- */
	--dp-container: 1354px; /* 1450 design frame − 2 × 48 gutter */
	--dp-container-narrow: 940px; /* width/940 */
	--dp-gutter: 48px;
	--dp-header-h: 88px;

	/* ---------------------------------------------------------------
	 * Motion
	 * --------------------------------------------------------------- */
	--dp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dp-speed: 0.28s;

	/* Decelerating curve for entrances — fast out of the gate, long settle. */
	--dp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	/* Slight overshoot, used sparingly (counters, back-to-top). */
	--dp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--dp-reveal-dur: 0.75s;
	--dp-reveal-shift: 28px;
	--dp-stagger-step: 90ms;
}

@media (max-width: 1024px) {
	:root {
		--dp-gutter: 32px;
		--dp-header-h: 76px;
	}
}

@media (max-width: 640px) {
	:root {
		--dp-gutter: 20px;
		--dp-header-h: 64px;
		/* Tracking is an em value, so it cannot ride the clamp track above. */
		--dp-btn-track: 0.06em;
	}
}