/* Design tokens - this is THE file to edit when reskinning for a new client. Swap colors/fonts here; the rest of the CSS reads from these custom properties. This default theme is a clean corporate blue real-estate look (centered search hero, agent + price cards, light sections, dark footer). */ :root { /* Brand colors */ --color-primary: #2b56e0; --color-primary-dark: #1f42b8; --color-primary-light: #e9eefc; --color-accent: #2b56e0; /* Text that sits ON the primary / accent colours. Defined here as a fallback so the site stays readable if /api/theme.css fails to load; the live theme recomputes both from contrast, which is what keeps a light brand colour (yellow, sand) from getting white text on it. */ --color-on-primary: #ffffff; --color-on-accent: #ffffff; /* Dark sections (CTA band, footer) */ --color-dark: #1a2233; --color-dark-2: #232d42; --color-dark-text: #e7eaf2; --color-dark-muted: #9aa3b8; /* Neutrals */ --color-bg: #ffffff; --color-bg-alt: #f5f7fb; --color-text: #1f2733; --color-text-muted: #6a7385; --color-border: #e6e9f0; /* Status badges */ --color-status-for-sale: #2b56e0; --color-status-for-rent: #159a7a; --color-status-sold: #8a8a8a; --color-status-rented: #8a8a8a; /* Category tag (e.g. "House") */ --color-tag: #2b56e0; /* Feedback */ --color-error: #d64545; --color-success: #159a7a; /* --- Third-party channel brand colors ------------------------------- DO NOT CHANGE THESE WHEN RESKINNING. These are each messaging app's own official color, not the client's brand. They live in this file only so that every color in the project stays in one place. */ --color-whatsapp: #25d366; --color-whatsapp-dark: #1da851; --color-viber: #7360f2; --color-viber-dark: #5b48d6; --color-messenger: #0084ff; --color-messenger-dark: #0068cc; /* Typography */ --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Base type size, applied to in base.css. Nearly every font-size in this project is in rem, so this one value scales the whole site's type at once. 100% is the browser default (usually 16px); 93.75% is 15px. Percent rather than px so a visitor who has raised their browser's default font size for readability still gets a proportionally larger site. */ --root-font-size: 93.75%; /* Layout */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --max-width: 1180px; --shadow-card: 0 6px 24px rgba(31, 39, 51, 0.08); --shadow-card-hover: 0 14px 40px rgba(31, 39, 51, 0.14); }