/* Brand design tokens (brand guide v1.0 draft). Colors, type scale, shape and spacing come from the guide.
   Open Sans is self-hosted from /fonts (no outside font hosts). Fallbacks are web-safe fonts. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/OpenSans-Light.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/OpenSans-Regular.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/OpenSans-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/OpenSans-Bold.woff2") format("woff2")}

:root {
  /* Palette. Brand colors are sampled from the logo files. */
  --scp-blue: #355176; /* Dark Blue (Brand). Primary. Logo wordmark and right peak. Headings, primary buttons, links, table headers, dark panels and footers. */
  --scp-sky: #6A9AD9; /* Light Blue (Brand). Logo left peak. Accents, charts, focus ring on dark. Not for text on white. */
  --scp-stone: #9F9A9E; /* Dark Gray (Brand). Logo center peak. Secondary graphics and rules. Not for text. */
  --scp-green: #8CBE41; /* Green (Brand). Logo base line. The one call-to-action accent. Dark text on it, never white. */
  --scp-red: #E24939; /* Red (Accent). Accent. Alerts and charts. Large text or graphics only. */
  --scp-orange: #F97B43; /* Orange (Accent). Accent. Charts and highlights. Graphics only. */
  --scp-purple: #957EBE; /* Purple (Accent). Accent. Sign borders and charts. Graphics only. */
  --scp-gray-light: #EFEFEF; /* Light Gray (Neutral). Badge discs and quiet panels. */
  --scp-white: #FCFCFC; /* White (Neutral). Brand white (badges and logo snow). Page background is pure #FFFFFF. */
  --scp-blue-deep: #283D59; /* Blue Deep (Derived). Hover and pressed state, deep panels. A darker step of Dark Blue. */
  --scp-ink: #1F2933; /* Ink (Derived). Body text. */
  --scp-muted: #5B6470; /* Muted (Derived). Secondary text, captions, footer text on white. */
  --scp-mist: #F3F6FA; /* Mist (Derived). Alternate section and table row background. */
  --scp-sky-tint: #EAF1FA; /* Sky Tint (Derived). Callouts and highlight panels. */
  --scp-line: #D9E0E8; /* Line (Derived). Dividers and card borders. Decorative only. */
  --scp-field: #757C87; /* Field Border (Derived). Form field borders (4.2:1 on white). */
  --scp-link-dark: #BBD3F3; /* Link on Dark (Derived). Links and small accents on Dark Blue. */
  --scp-logo-black: #000000; /* Logo Black (Logo only). The REAL ESTATE line in the logo files. Do not use it for anything else. */
  --scp-error: #B3261E; /* Error (Derived). Form errors only. Red accent fails for small text. */
  --scp-green-deep: #7AAA34; /* Green Deep (Derived). Hover state of the green button. */

  /* Roles */
  --color-bg: #FFFFFF;
  --color-surface: var(--scp-mist);
  --color-surface-accent: var(--scp-sky-tint);
  --color-text: var(--scp-ink);
  --color-text-muted: var(--scp-muted);
  --color-heading: var(--scp-blue);
  --color-link: var(--scp-blue);
  --color-link-hover: var(--scp-blue-deep);
  --color-border: var(--scp-line);
  --color-field-border: var(--scp-field);
  --color-focus: var(--scp-blue);
  --color-error: var(--scp-error);
  --color-btn-primary-bg: var(--scp-blue);
  --color-btn-primary-bg-hover: var(--scp-blue-deep);
  --color-btn-primary-text: #FFFFFF;
  --color-btn-cta-bg: var(--scp-green);
  --color-btn-cta-bg-hover: var(--scp-green-deep);
  --color-btn-cta-text: var(--scp-ink);
  --color-btn-secondary-bg: #FFFFFF;
  --color-btn-secondary-text: var(--scp-blue);
  --color-btn-secondary-border: var(--scp-blue);
  --color-dark-bg: var(--scp-blue);
  --color-dark-text: #FFFFFF;
  --color-dark-text-muted: var(--scp-gray-light);
  --color-dark-link: var(--scp-link-dark);
  --color-dark-focus: var(--scp-link-dark);
  --color-dark-line: var(--scp-sky);

  /* Type */
  --font-heading: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --tracking-eyebrow: 0.12em;
  --measure: 68ch;
  --fs-display: 3rem; --lh-display: 3.5rem; --fw-display: 400; /* 48/56 px. Home page hero heading, one per page */
  --fs-h1: 2.25rem; --lh-h1: 2.75rem; --fw-h1: 400; /* 36/44 px. Page title */
  --fs-h2: 1.75rem; --lh-h2: 2.25rem; --fw-h2: 400; /* 28/36 px. Section titles */
  --fs-h3: 1.375rem; --lh-h3: 1.875rem; --fw-h3: 400; /* 22/30 px. Card and subsection titles */
  --fs-h4: 1.125rem; --lh-h4: 1.625rem; --fw-h4: 600; /* 18/26 px. Small headings, form group titles */
  --fs-lead: 1.25rem; --lh-lead: 1.875rem; --fw-lead: 300; /* 20/30 px. Intro paragraph under a heading */
  --fs-body: 1.125rem; --lh-body: 1.75rem; --fw-body: 300; /* 18/28 px. Paragraphs. Light 300 only at 17 px and above */
  --fs-body-sm: 1rem; --lh-body-sm: 1.5rem; --fw-body-sm: 400; /* 16/24 px. Tables, cards, form text. Regular 400 */
  --fs-small: 0.875rem; --lh-small: 1.25rem; --fw-small: 400; /* 14/20 px. Captions, hints, footer text. 14 px is the web minimum */
  --fs-eyebrow: 0.8125rem; --lh-eyebrow: 1.125rem; --fw-eyebrow: 600; /* 13/18 px. Labels in capitals, tracked 0.12em */
  --fs-button: 1rem; --lh-button: 1.25rem; --fw-button: 600; /* 16/20 px. Buttons, 48 px tall */

  /* Shape, space, focus */
  --radius-sm: 6px; --radius-md: 10px; --radius-btn: 8px; --radius-lg: 16px; --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px;
  --shadow: 0 2px 10px rgba(53, 81, 118, 0.14); /* Soft card shadow. Never on the logo. */
  --focus-width: 2px; --focus-offset: 2px;

  /* Buttons and links */
  --btn-height: 48px; --btn-padding-x: 24px;

  /* Header and footer */
  --header-logo-width: 300px; --footer-logo-width: 300px; --footer-min-font: 14px;
}

@media (max-width: 640px) {
  :root {
    --fs-display: 2.125rem; --lh-display: 2.5rem;
    --fs-h1: 1.875rem; --lh-h1: 2.375rem;
    --fs-h2: 1.5rem; --lh-h2: 2rem;
    --fs-h3: 1.25rem; --lh-h3: 1.75rem;
    --fs-lead: 1.125rem; --lh-lead: 1.75rem;
    --fs-body: 1.0625rem; --lh-body: 1.6875rem;
  }
}

/* Site-only additions (not part of the brand guide): layout width and preview markers. */
:root {
  --maxw: 1120px;
  --header-height: 80px;
  --fs-footer: 0.9375rem;      /* footer text, never below the smallest page text */
  --fs-eyebrow-web: 0.875rem;  /* eyebrow labels held at the 14 px web minimum */
  --hero-photo-opacity: 0.16;  /* only used when a hero photo is configured in the build script */
  /* Preview markers for placeholders and drafts. Deliberately outside the brand palette so they stand out. */
  --flag-bg: #FFF8E1; --flag-border: #8A5A00; --flag-ink: #5C3D00;
}