/* Colours follow the browser preference, including when JavaScript is disabled. */
@media(prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --bg:#ffffff;
    --panel:#f3f6fc;
    --text:#0c1730;
    --muted:#566480;
    --accent:#1955b8;
    --accent-2:#2f7bea;
    --line:#dbe2f0;
    --btn:#1955b8;
    --btn-text:#fff;
    --btn-hover:#134591;
    --surface:#fff;
    --surface-selected:#edf3fd;
    --header-bg:#fffffff0;
    --accent-rgb:25,85,184;
    --accent-hover:#134591;
    --accent-contrast:#fff;
    --field-border:#a5b1c9;
    --error:#a02d24;
    --viewer-backdrop:#f7f9fdf5;
    --loading-bg:#eef3fb;
    --loading-dot:#e1e9f7;
    --work-bg:#f3f6fcd9;
    --label-bg:#fffffff0;
    --logo-mark:#0119cf;
    --logo-word:#0119cf;
  }

  /* Map the original dark component colours to the light palette. */
  :root .header{background:var(--header-bg);border-bottom-color:var(--line)}
  :root .nav-link{color:var(--muted)}
  :root .nav-link:hover{color:var(--accent)}
  :root .nav-contact{border-color:var(--field-border)}
  :root .nav-contact:hover{color:var(--accent-contrast)}
  :root .button-primary{color:var(--accent-contrast)}
  :root .button-primary:hover{background:var(--accent-hover)}
  :root .skip-link{color:var(--accent-contrast)}
  :root ::selection{color:var(--accent-contrast)}
  :root :is(.hero-description,.hero .hero-description,.approach-intro,.card-description,.price-context,.care-state,.inclusions,.content-heading .lead,.reading-copy,.footer-links,.work-heading>.work-position,.work-annotation,.work-copy>p:not(.work-label):not(.work-note),.project-heading .lead,.project-facts,.project-story p,.project-detail>p,.project-cta p,.feature-demo-link,.work-booking .feature-demo-cue){color:var(--muted)}
  :root :is(.text-link,.contact-direct a,.breadcrumbs a,.reading-copy a,.related-links a,.footer-links a){text-decoration-color:var(--field-border)}
  :root :is(.work-project-link,.feature-demo-link){border-bottom-color:var(--field-border)}
  :root :is(.text-link,.work-project-link,.feature-demo-link):hover{color:var(--accent)}
  :root :is(.work-project-link,.feature-demo-link):hover{border-color:var(--accent)}
  :root .hero-actions .button-secondary{background:var(--surface);color:var(--text);border-color:var(--line)}
  :root .hero-actions .button-secondary:hover{background:var(--surface-selected);border-color:var(--accent)}
  :root :is(.hero-details,.hero-detail+.hero-detail){border-color:var(--line)}
  :root .hero-detail>svg{color:var(--accent)}
  
  /* Form states retain a clear accent and visible edges. */
  :root .form-field :is(input,textarea,select){background:var(--surface);border-color:var(--field-border)}
  :root .form-field :is(input,textarea)::placeholder{color:var(--muted)}
  :root .form-field :is(input,textarea,select):focus{background:var(--surface-selected);border-color:var(--accent)}
  :root .form-status[data-state="error"]{color:var(--error)}
  
  /* Screenshot pixels and embedded demos keep their original colours. */
  :root .work-feature{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
  :root .work-desktop{border-color:var(--line);box-shadow:0 12px 28px rgba(var(--accent-rgb),.12)}
  :root .work-booking{box-shadow:0 14px 35px rgba(var(--accent-rgb),.18)}
  :root .work-arrow:before{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.15)}
  :root .work-arrow{opacity:.65}
  :root .work-arrow:is(:hover,:focus-visible){opacity:1}
  :root .work-features li:before{background:var(--muted)}
  :root :is(.project-screen>a,.project-feature-grid .project-screen-mobile img){border-color:var(--line)}
  :root .project-screen>a:hover{border-color:var(--accent)}
  :root .project-feature-grid .project-screen>a{background:var(--panel)}
  :root .project-feature-grid .project-screen-mobile>a{background:var(--surface-selected)}
  :root .work-booking.feature-preview::before{background:linear-gradient(135deg,rgba(var(--accent-rgb),.5),rgba(var(--accent-rgb),.15) 55%,rgba(var(--accent-rgb),.4))}
  :root .feature-preview .feature-preview-label{background:var(--surface);color:var(--accent);border-color:rgba(var(--accent-rgb),.55);box-shadow:0 3px 12px #0002}
  :root .feature-preview:hover .feature-preview-label{background:var(--surface-selected);color:var(--accent);border-color:var(--accent)}
  :root .work-booking.feature-preview:is(:hover,:focus-visible) .feature-preview-label{background:var(--surface-selected);border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1),0 0 18px rgba(var(--accent-rgb),.18),0 3px 12px #0002}
  
  /* Dialog chrome follows the browser palette without altering its images. */
  :root .feature-demo-viewer{background:var(--surface);border-color:var(--line);--loading-bg:var(--surface);--loading-dot:#e8f1ea}
  :root :is(.feature-demo-viewer,.image-viewer)::backdrop{background:var(--viewer-backdrop)}
  :root .feature-demo-toolbar{border-color:var(--line)}
  :root .feature-demo-toolbar p{color:var(--text)}
  :root :is(.feature-demo-toolbar span,.feature-demo-fallback,.image-viewer-caption){color:var(--muted)}
  :root :is(.feature-demo-close,.image-viewer-control){background:var(--surface);border-color:var(--field-border);color:var(--text)}
  :root :is(.feature-demo-close,.image-viewer-control):hover{background:var(--surface-selected);border-color:var(--accent);color:var(--accent)}
}

@media(prefers-color-scheme:light) and (prefers-contrast:more){
  :root{--muted:#33405c;--line:#6b7a96;--field-border:#6b7a96}
  :root .work-arrow{opacity:1}
  :root :is(.eyebrow,.hero .hero-description,.content-heading .lead,.reading-copy,.footer-links,.work-copy>p,.work-copy>p:not(.work-label):not(.work-note),.work-features,.work-annotation,.project-heading .lead,.project-story p,.project-detail>p,.project-cta p,.feature-demo-toolbar span,.image-viewer-caption){color:var(--text)}
  :root :is(.hero-details,.hero-detail+.hero-detail,.hero-actions .button-secondary,.feature-preview .feature-preview-label,.image-viewer-control){border-color:var(--accent)}
}