@font-face {
  font-family: 'Roboto';
  src: url('../media/roboto-latin-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

/* Provisional starter palette, not final branding.
   Change values here to rebrand; components should keep using the semantic roles.
   Recheck contrast for actual pairings and interactive states after every change. */
:root {
  /* Preserve the approved 1608px viewport proportions: 18.43px type in a 176px diamond. */
  --ratio-diamond-label-size: .1047027;
  /* Scale the 2px outline with the same 176px reference diamond. */
  --ratio-diamond-outline-size: .0113636;
  /* Optical label margin scales with diamond width: -11px in the 176px reference. */
  --space-diamond-label-offset: -6.25%;
  /* Lift benefit copy by one tenth of the stable viewport height. */
  --space-benefit-copy-lift: 10svh;
  /* Keep apartment data below the fixed desktop navigation, with breathing room. */
  --space-apartment-sidebar-top: clamp(10rem, 14vw, 12rem);
  /* Paper story surfaces; white display type and story ink sit over these fields. */
  --color-story-concept: #7da1ad;
  --color-story-location: #6f6f6f;
  --color-story-personal: #ffdfbf;
  /* Light captions and links over photography and the grey story field. */
  --color-story-light: #ffffff;
  /* Inactive benefit choices over the shaded photograph; selected choices use story-light. */
  --color-benefit-inactive: #ffffffb3;
  /* Dark photo scrim beneath white benefit labels and descriptive copy. */
  --color-benefit-shade: rgb(0 0 0 / 65%);
  /* Dark reading text on the teal and peach story fields. */
  --color-story-ink: #163567;
  /* Deeper blue contact canvas supports white text at normal reading sizes. */
  --color-contact-home-surface: #527887;
  /* White text over the homepage contact blue; contrast exceeds 4.5:1. */
  --color-contact-home-text: #ffffff;
  /* Blog canvas matches the apartment page surface; paired with black article text. */
  --color-blog-surface: var(--color-surface-page);
  --color-blog-text: #000000;
  /* Softer large BLOG heading and supporting navigation on the shared page canvas. */
  --color-blog-heading: #434343;
  --color-story-personal-text: #444444;
  /* Lower photograph shade supports the white architecture captions. */
  --color-story-shade: rgb(0 0 0 / 55%);
  --color-story-map-surface: #dddddd;
  --font-body: 'Roboto', sans-serif;
  /* Shared serif headings, including document modals on every page. */
  --font-display: 'Bodoni Moda', Georgia, serif;
  /* Header links on light sections, matching the darkened logo at 28% brightness. */
  --color-header-text-dark: #474747;
  /* Apartment desktop rem size: 16px at the 1260px reference, proportional above it. */
  --type-apartments-desktop-base: 1.26984127vw;
  /* Shared editorial apartment cards: readable labels, full-width title and equal fact values. */
  --type-apartment-card-label: .9rem;
  --type-apartment-card-title: 2rem;
  --type-apartment-card-value: 2.2rem;
  /* List apartment numbers: 60px at the standard 16px root, scaling with desktop typography. */
  --type-apartment-row-number: 3.75rem;
  /* Equal building and floor-plan frames in expanded rows; contain images without cropping. */
  --ratio-apartment-row-media: 4 / 3;
  /* Consistent card inset and separation between heading, plan and facts. */
  --space-apartment-card: clamp(.75rem, 2vw, 1.5rem);
  /* Match the logo inset for both the Menu and Schliessen controls. */
  --space-mobile-menu-inset: clamp(1rem, 2vw, 1.5rem);
  /* Main reading canvas. Pair with text-primary or text-secondary. */
  --color-surface-page: #f7f5f0;

  /* Cards, menus, and distinct content panels on the page canvas. */
  --color-surface-raised: #ffffff;

  /* Hovered or selected apartment card fill, paired with primary text. */
  --color-surface-card-active: #e5ebe5;

  /* Quiet section grouping; creates hierarchy without implying interaction. */
  --color-surface-subtle: #eae6de;

  /* Dark feature sections/footer. Pair exclusively with text-on-inverse. */
  --color-surface-inverse: #202c29;

  /* Headings and main body copy on page, raised, and subtle surfaces. */
  --color-text-primary: #202723;

  /* Supporting copy on light surfaces; never use opacity to weaken readability. */
  --color-text-secondary: #515a54;

  /* Readable foreground for surface-inverse; not for light surfaces. */
  --color-text-on-inverse: #ffffff;

  /* Primary interactive fill, e.g. inquiry CTA. Pair with text-on-action. */
  --color-action-primary: #285344;

  /* Hover/active fill for primary actions; retains the text-on-action pairing. */
  --color-action-primary-hover: #1d4034;

  /* Labels/icons inside primary action fills, including hover state. */
  --color-text-on-action: #ffffff;

  /* Neutral view switch fills; pair with white text-on-action. */
  --color-action-neutral: #474747;

  /* Inline navigation within prose on light surfaces; also use an underline. */
  --color-link: #285344;

  /* Non-interactive brand accents on light backgrounds. Not for body text. */
  --color-accent-decorative: #a77849;

  /* Quiet separators on light surfaces; not the sole boundary of a control. */
  --color-border-subtle: #d4d7d0;

  /* Visible form/control boundaries on light surfaces. */
  --color-border-control: #727b73;

  /* Keyboard focus ring on light surfaces; pair with focus-gap for separation. */
  --color-focus-ring: #245bc0;

  /* Keyboard focus ring on surface-inverse, where the standard ring is unsuitable. */
  --color-focus-ring-inverse: #a7c6ff;

  /* Separation between an interactive fill and its outer focus ring. */
  --color-focus-gap: #ffffff;

  /* Validation errors on light surfaces; accompany with text/icon, not color alone. */
  --color-status-error: #a12727;

  /* Confirmed success on light surfaces; never imply unverified form submission. */
  --color-status-success: #28613a;

  /* Confirmed available apartment status on light cards; paired with a status label. */
  --color-status-available: #28613a;
  /* Reserved apartment badge: dark amber text/border on a yellow status surface. */
  --color-status-reserved: #594000;
  --color-status-reserved-surface: #f8df83;
  /* Sold apartment badge: dark red text/border on a pale red status surface. */
  --color-status-sold: #922b24;
  --color-status-sold-surface: #fce3df;

  /* Selected apartment overlay on the pale isometric drawing; outline remains solid. */
  --color-plan-highlight: #285344;

  /* Magenta editorial stamp for missing plans, paired with a raised white backing. */
  --color-plan-placeholder: #c0008b;

  /* Neutral gray standing in for future apartment photographs. */
  --color-photo-placeholder: #d5d5d5;

  /* Magenta headings marking unfinished sections on the light page canvas. */
  --color-section-placeholder: #c0008b;

  /* White headline and subline over the residential hero image. */
  --color-hero-text: #ffffff;

  /* Bottom hero photo overlay, matching the architecture shade behind white text. */
  --color-hero-image-shade: rgb(0 0 0 / 55%);

  /* Sky behind the night courtyard render where its landscape image does not fill the tall hero. */
  --color-hero-night-sky: #2a4169;

  /* Black hero circle outlines and active fills over the courtyard image. */
  --color-hero-hotspot: #000000;

  /* Black inner circle outlines and active centers over the hero image. */
  --color-hero-hotspot-center: #000000;

  /* Hover card over the hero image at 80% opacity; pair with hero-card-text. */
  --color-hero-card-surface: #484848cc;

  /* Heading and paragraph copy on hero-card-surface. */
  --color-hero-card-text: #ffffff;

  /* Black connector from the active circle to the desktop hover card. */
  --color-hero-line: #000000;
  /* White hotspot rings, active fills, and connectors remain visible over the night render. */
  --color-hero-night-marker: #ffffff;
  /* Small separation between the Licht & Fluss card and its desktop connector. */
  --space-hero-card-connector-gap: .25rem;

  /* Keyboard focus outline for the active hero marker. */
  --color-hero-focus-ring: #ffffff;

  /* Dark gap behind the white focus outline so it remains visible over bright sky. */
  --color-hero-focus-shadow: #202723;

  /* Light backing for the Tag/Nacht control over either hero image; pair with hero-switch-text. */
  --color-hero-switch-surface: #fffffff2;

  /* Inactive Tag/Nacht control text on hero-switch-surface. */
  --color-hero-switch-text: #202723;

  /* Selected Tag/Nacht control fill in the site's dark gray; pair with white hero-switch-active-text. */
  --color-hero-switch-active-surface: #474747;

  /* Selected Tag/Nacht control text on hero-switch-active-surface. */
  --color-hero-switch-active-text: #ffffff;

  /* Teal six-sided field behind concept copy; pair large headings with concept-text. */
  --color-concept-hexagon-surface: #8ca9af;

  /* Delicate hexagon edge on the warm concept field; decorative only. */
  --color-concept-hexagon-outline: #9bad9e;

  /* Architectural glyph and active progress marks on the light concept field. */
  --color-concept-mark: #285344;

  /* Warm canvas behind the concept journey; pair with concept-text or concept-body-text. */
  --color-concept-surface: #ffdfbf;

  /* Concept navigation numbers and controls on the warm concept field. */
  --color-concept-text: #474747;

  /* White concept panel headings over the raised teal hexagon. */
  --color-concept-heading: #ffffff;

  /* White descriptive copy paired with the concept hexagon surface. */
  --color-concept-body-text: #ffffff;

}

/* Apartment surfaces and accents use the homepage muted blue.
   Text and availability retain their original dark and green semantic colors. */
.apartments-page, .apartment-page {
  /* Match the homepage contact blue for contact sections and modal backdrops;
     paired with white text-on-inverse. */
  --color-surface-inverse: var(--color-contact-home-surface);
  /* Selected cards use a pale blue tint beneath the original dark text. */
  --color-surface-card-active: color-mix(in srgb, var(--color-contact-home-surface) 10%, var(--color-surface-page));
  /* Primary inquiry buttons pair the established blue with white text-on-action. */
  --color-action-primary: var(--color-contact-home-surface);
  /* Hover buttons deepen the blue while retaining white foreground contrast. */
  --color-action-primary-hover: color-mix(in srgb, var(--color-contact-home-surface) 85%, black);
  /* Inline links on the light page canvas. */
  --color-link: var(--color-contact-home-surface);
  /* Quiet blue-tinted dividers on light backgrounds. */
  --color-border-subtle: color-mix(in srgb, var(--color-contact-home-surface) 20%, var(--color-surface-page));
  /* Essential card and control edges remain clearly visible on light surfaces. */
  --color-border-control: color-mix(in srgb, var(--color-contact-home-surface) 90%, var(--color-surface-page));
  /* Selected apartment polygons use blue fill and a solid blue outline. */
  --color-plan-highlight: var(--color-contact-home-surface);
}